Centrage vertical de texte

**filtep** · 17/11/2013, 15h39

Bonjour,
Je ne parviens pas à centrer verticalement le texte dans mon bloc, vertical-align ne semble pas fonctionner...

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
<html>
<head>
<style>
.bloc{
display:inline-block;
width:30%;
height:30%;
border:solid 1px red;
vertical-align:middle;
text-align:center;
}
</style>
</head>
 
<body>
<div class="bloc">
blabla
</div>
 
</body>
</html>

Merci pour votre aide.
Philippe

**Sha0r4n** · 17/11/2013, 18h19

C'est normal, dans ton code css tu sélectionnes ton bloc et non ton texte. Si tu veux aligner ton texte, tu dois le mettre dans un bloc <p> auquel tu appliques vertical-align.

Comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
.bloc{
	display:inline-block;
	border:solid 1px red;
	text-align:center;
}
p{
	display:inline-block;
	vertical-align:middle;
	border: 1px solid red;
}

Code html :

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

1
2
3
4
5
<body>
	<div class="bloc">
		<p>blabla</p>
	</div>
</body>

Par contre, vertical-align ne s'adapte pas au changement de la taille de ton bloc parent. Je ne sais pas trop pourquoi, jette un coup d'oeil aux recommendations w3c, ou sinon quelqu'un d'autre aura sûrement la réponse

**filtep** · 17/11/2013, 18h48

Ah OK,
en fait j'utilisais vertical-align comme text-align, ce qui me paraissait plutôt logique...
Donc vertical align doit s'appliquer à l'élément à aligner et non à son parent.

Merci beaucoup

A+
Philippe

Centrage vertical de texte

Centrer un élément en CSS

Discussions similaires

Partager

Partager