Aligner un texte horizontal

Bonjour,

J'ai un petit soucis, j'ai un div dans lequel j'ai plusieurs menus, certains tenant sur une ligne et d'autres sur deux lignes, et je souhaiterai les aligner verticalement... Sauf que j'ai beau chercher des solutions, aucune ne fonctionne pour mon cas... A moins que ce soir mon code qui soit faux... Bref, quelqu'un aurait une solution pour moi ? ^^'

Je mets mon css, au cas où...

.YD{
	width:238px;
	height:90px;
	float: left;
	background-color:#44B8AD;
	margin-top:10px;
	margin-left:10px;
	text-align:center;
	color:#FFF;
	font-family:"Akzidenz-Grotesk BQ";
	font-size:1.2em;
	opacity:0.1;
	border-radius:2px;
	display:table-cell;
	vertical-align:center;
}

Merci d'avance ! =D
Modifié par Clift (21 Nov 2013 - 15:54)

Bonjour,
première remarque, tu mets le CSS du survol

Ensuite, si tu utilises display: table-cell, tu peux te servir de vertical-align: middle par exemple, pour centrer verticalement ton texte. As-tu essayé ?

Rebonjour,

Ouais, j'avais pas vu que j'avais mis le survol... ^^'

Mais malgrès avoir corrigé mon CSS et avoir tenté le middle, mon texte persiste à rester en haut...

Serait-il possible de voir le HTML associé, et le CSS de l’état normal ? (un jsfiddle ou dabblet serait génial ).

Ouais, bien sûr, le voila

HTML

<ul>
<li class="vide">       </li>
 <li class="YD">Faites une ballade</li>
    <li class="YD">Faites des mots fléchés</li>
    <li class="vide">   </li>
    <li class="YD">Faites un sudoku</li>
    <li class="vide">   </li>
    <li class="YD">Dessinez</li>
</ul>

CSS

.YD{
	width:238px;
	height:90px;
	float: left;
	background-color:#44B8AD;
	margin-top:10px;
	margin-left:10px;
	text-align:center;
	color:#FFF;
	font-family:"Akzidenz-Grotesk BQ";
	font-size:1.2em;
	opacity:0.1;
	border-radius:2px;
	display:table-cell;
	vertical-align:middle;
}

Après un petit test sur dabblet le principal obstacle que tu rencontres est le float: left qui force tes éléments à ignorer le display:table-cell (et donc le vertical-align).

Je pense que tu devrais enlever ce float, mais à toi de voir : tu peux aussi ajouter un conteneur spécifique pour centrer verticalement ton texte, ou utiliser inline-block, tu vas avoir l'embarras du choix…

L’article sur le centrage vertical sur Alsa pourra t’en apprendre plus sur chacune des options qui s’offrent à toi

J'avais pas pensé au conteneur spécifique, j'ai testé et ça marche ! =D Merci beaucoup de ton aide !