Alignement de texte avec text-align: center

**Kadom** · 25/05/2017, 12h22

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 :

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;
}

Voici ce que j'obtiens :

Nom : Capture.PNG
Affichages : 144
Taille : 20,9 Ko

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.

**danielhagnoul** · 25/05/2017, 23h31

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.container-fluid {
	background-color: #81F7F3;
	box-shadow: 2px 2px #81DAF5;
	border-radius: 10px;
	width: 200px;
	padding: 10px 5px;
	line-height: 35px;
	text-align: center;
}

C'est provoqué par l'ajout de la propriété width, il faut du coup préciser le display :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.container-fluid {
  width: 200px;
  display: inline-block;
  text-align: center;
  background-color: #81F7F3;
  box-shadow: 2px 2px #81DAF5;
  border-radius: 10px;
  padding: 10px 5px;
  line-height: 35px;
}

**JefReb** · 26/05/2017, 08h40

Non, il suffit tout simplement de rajouter un margin auto

Code css :

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
#container {
	text-align: center;
	margin-top: 60px;
	/*text-align: center;*/ /* à supprimer, un de trop */
	width: 100%;
	background-color: red;
	padding: 1px 5px;
}
.container-fluid {
	background-color: #81F7F3;
	box-shadow: 2px 2px #81DAF5;
	border-radius: 10px;
	width: 200px;
	margin:0 auto; /* <--- à rajouter pour centrer */
	padding: 10px 5px;
	line-height: 35px;
	/*text-align: center;*/ /* à supprimer, pas util */
}

**Kadom** · 26/05/2017, 12h09

Parfait, je vous remercie ^^

Alignement de texte avec text-align: center

Positionnement en CSS

Discussions similaires

Partager

Partager