[CSS 2.1] 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

Citation:

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>

18/06/2011, 23h39	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Tu peux consulter cette discussion récente qui évoque le sujet : http://www.developpez.net/forums/d10...verticalement/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

19/06/2011, 05h48	#3
stecale Invité de passage Inscription : novembre 2006 Messages : 6 Détails du profil Informations forums : Inscription : novembre 2006 Messages : 6 Points : 2 Points : 2	centrer en vertical un texte dans un div 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
	00

19/06/2011, 11h23	#4
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	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... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email