centrer en vertical un texte dans un div

**stecale** · 18/06/2011, 22h14

Je cherche à centrer verticalement un texte pour l'utilisation dans un menu dont les titres doivent être sur un bloc image de dimensions fixes.
Voici le code exemple :

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
<style type="text/css">
#titre-menu {
		width: 100px;
		height: 50px;
		background-color: #09C;
}
h3 {
	height: 50px;
	vertical-align: middle;
}
</style>
 
<body>
<div id="titre-menu">
<h3>titre menu 1</h3>
</div>
<div id="titre-menu">
<h3>titre menu 2 sur 2 lignes</h3>
</div>

Le problème est d'arriver à aligner le texte du menu qu'il soit sur une ligne ou 2 lignes en fonction de la longueur du texte. La largeur doit être fixe.
Merci de votre aide

**12monkeys** · 18/06/2011, 23h39

Bonjour

Tu peux consulter cette discussion récente qui évoque le sujet : http://www.developpez.net/forums/d10...verticalement/

**stecale** · 19/06/2011, 05h48

Merci pour l'info.
J'ai regardé la discussion mais elle n'apporte pas de solution au problème particulier que j'évoque.
Les solutions proposées consistent à fixer le line-height à la hauteur du bloc.
Cette solution convient parfaitement pour une ligne ou 2 lignes si on accepte le fait que la hauteur du bloc varie en fonction du nombre de lignes.
Le problème que je pose concerne le centrage vertical de l'affichage d'un texte sur une ligne ou 2 lignes dans un bloc de hauteur fixe.
Cdlt

**12monkeys** · 19/06/2011, 11h23

Ben si tu trouvais ta réponse dans cette discussion : il suffit de rajouter display:table-cell; à ton titre h3.

Ce ne sera simplement pas compatible avec Internet Explorer 7 comme indiqué par Macmillenium.

Sinon le code de Macmillenium fonctionne également dans ton cas. Dans son exemple la hauteur du bloc est bien fixe...

**Macmillenium** · 19/06/2011, 11h25

Envoyé par stecale

Le problème que je pose concerne le centrage vertical de l'affichage d'un texte sur une ligne ou 2 lignes dans un bloc de hauteur fixe.

La solution se trouve quand même dans le lien donné par 12monkeys

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
 
	<style type="text/css">
        #titre-menu {
                        width: 100px;
                        height: 50px;
                        line-height:50px;
                        background-color: #09C;
        }
        h3 {
                /*height: 50px;*/
                margin:0; /* annuler les marges par défaut */
                line-height:1.1; /* rétablir le line-height */
                display:inline-block; /* attribuer au h3 un rendu inline-block */
                vertical-align: middle /* aligner le h3 verticalement */
        }
        </style>
 
	<!--[if lte IE 7]>
		<style type="text/css" media="screen">
			h3 { display:inline /* émuler inline-block sur IE7 et inférieur */  }
		</style>
	<![endif]-->	
 
	<body>
	<div id="titre-menu">
	<h3>titre menu 1</h3>
	</div>
	<div id="titre-menu">
	<h3>titre menu 2 sur 2 lignes</h3>
	</div>

centrer en vertical un texte dans un div

Centrer un élément en CSS

Discussions similaires

Partager

Partager