Bonjour, Bonsoir
J'ai 2 <h1> un qui s'aligne bien au milieu de ma page et l'autre qui reste sur la gauche. Ces 2 <h1> sont dans la même div. Ils devraient donc, tous les 2 êtres affectés par le "text-align: center;". Mais, seul le premier est affecté.
Auriez-vous une idée du problème ?
Les classes concernées sont "container" et "container-fluid"
Voici le HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="./logo/favicon.ico"> <title>J.L Photographie</title> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <header class="nav"> <a style="padding-top:5px;" href="#"><img alt="J.L Photographie" src="./logo/brand-jl-photographie.png"/></a> <ul class="uppercase"> <li><a class="active" href="#">accueil</a></li> <li><a href="#">galerie</a></li> <li><a href="#">contact</a></li> <li><a href="#">à propos</a></li> </ul> </header> <div id="container"> <h1>Bienvenue sur mon site !</h1> <h1 class="container-fluid">News</br>sur le Journal</h1> </div> </body> </html>
Le CSS :
Voici ce que j'obtiens :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82 @font-face { font-family: 'youth_and_beautyregular'; src: url('../fonts/youth-and-beauty-webfont.woff2') format('woff2'), url('youth-and-beauty-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'youth_and_beautyregular'; src: url('../fonts/youth-and-beauty-webfont.woff2') format('woff2'), url('../fonts/youth-and-beauty-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .uppercase { text-transform: uppercase; } .lowercase { text-transform:lowercase; } #container { font-family: youth_and_beautyregular; text-align: center; margin-top: 60px; text-align: center; width: 100%; background-color: red; padding: 1px 5px; } .container-fluid { background-color: #81F7F3; box-shadow: 2px 2px #81DAF5; border-radius: 10px; width: 200px; padding: 10px 5px; line-height: 35px; text-align: center; } .nav { position: absolute; background-color: #7FFFD4; width: 100%; height: auto; top: 0; left: 0; } .nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; float: right; } .nav li { float: left; } .nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .nav li a:hover:not(.active) { background-color: #008B8B; } .active { background-color: #00CED1; }
Merci d'avance pour votre aide
EDIT : Il semblerait que le problème vient du "width: 200px;" dans la classe "container-fluid". Lorsque je le supprime le texte se centre mais, le rectangle bleu qui l'entoure prend toute la largeur.
Partager