Mise À Jour - À L'Aide De Flexbox
Inline avec le maintien de ce post à jour avec la dernière technologie, voici un moyen beaucoup plus facile pour le centre de quelque chose en utilisant flexbox. Flexbox n'est pas pris en charge en IE9 and lower.
Voici quelques ressources:
jsfiddle avec les préfixes de navigateur
HTML
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on 2 lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
CSS
li {
display: flex;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
}
Mise à jour - une Autre solution
C'est à partir de zerosixthree et vous permet de centre de quoi que ce soit avec 6 lignes de css
Cette méthode n'est pas pris en charge en IE8 and lower
jsfiddle
HTML
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on 2 lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
CSS
p {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Réponse précédente
Simple et de la croix-navigateur, utile que des liens dans le marqué réponse sont légèrement dépassées.
Comment verticalement et horizontalement centrer le texte dans une liste non ordonnée et une div sans avoir recours à JavaScript ou css de la hauteur de ligne. N'importe quelle quantité de texte que vous avez, vous n'aurez pas à appliquer toutes les classes spéciales pour les listes ou les divs (le code est le même pour chacun). Cela fonctionne sur tous les principaux navigateurs, y compris IE9, IE8, IE7, IE6, Firefox, Chrome, Opera et Safari. Il y a 2 spécial des feuilles de style (1 pour IE7 et un autre pour IE6) pour les aider ainsi à cause de leur css limitations des navigateurs modernes n'ont pas.
Edit:
Comme je n'ai pas beaucoup de soins pour IE7/6 pour le dernier projet, j'ai travaillé, j'ai utilisé un peu dépouillé version (c'est à dire supprimé le truc qui fait le travail dans IE7 et 6). Peut être utile pour quelqu'un d'autre...
jsfiddle
HTML
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p><!-- Content --></p>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p><!-- Content --></p>
</div>
</div>
</div>
</li>
</ul>
Et le CSS:
.outerContainer {
display: table;
width: 100px; /* width of parent */
height: 100px; /* height of parent */
overflow: hidden;
}
.outerContainer .innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
li {
background: #ddd;
width: 100px;
height: 100px;
}
