web-dev-qa-db-fra.com

Texte d'alignement vertical CSS dans li

J'affiche le nombre de cases dans une rangée avec une hauteur et une largeur fixes, générées à partir de balises <li> . Je dois maintenant aligner le texte au centre vertical . Le CSS align-vertical n'a aucun impact, peut-être Il me manque quelque chose ???

Je ne cherche pas les astuces utilisant (marge, remplissage, hauteur de ligne), elles ne fonctionneront pas car certains textes sont longs et se séparent en deux lignes.

Veuillez trouver le code actuel:

Code CSS

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Code HTML

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>
htmlcssvertical-alignment
84
AK4668

Définissez le parent avec display: table et l'élément lui-même avec vertical-align: middle et display: table-cell.

91
Asaf Chertkoff

line-height est la façon dont vous alignez le texte verticalement. C'est assez standard et je ne le considère pas comme un "bidouillage". Ajoutez simplement line-height: 100px à votre ul.catBlock li et tout ira bien.

Dans ce cas, vous devrez peut-être l'ajouter à ul.catBlock li a car tout le texte à l'intérieur de li est également à l'intérieur d'une a. J'ai vu des choses étranges se produire quand vous faites cela, alors essayez les deux et voyez laquelle fonctionne.

51
Logan Serman

Étonnamment (ou pas), l'outil vertical-align fonctionne réellement mieux pour ce travail. Le meilleur de tous, aucun Javascript n'est requis.

Dans l'exemple suivant, je positionne la classe outer au milieu du corps et la classe inner au milieu de la classe outer.

Aperçu: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Alignement vertical fonctionne en alignant les centres des éléments les uns à côté des autres. Appliquer vertical-align à un seul élément ne fait absolument rien. Si vous ajoutez un deuxième élément qui n'a pas de largeur mais correspond à la hauteur du conteneur, votre seul élément se déplacera verticalement au centre avec cet élément sans largeur, le centrant ainsi verticalement. Les seules exigences sont que vous définissiez les deux éléments sur inline (ou inline-block) et que vous définissiez leur attribut vertical-align sur vertical-align: middle.

Remarque: dans mon code ci-dessous, vous remarquerez peut-être que mes balises <span> et <div> se touchent. Étant donné que ce sont des éléments en ligne, un espace ajoutera un espace entre l'élément no-width et votre div. laisser de côté.

15
Wex

À l'avenir, ce problème sera résolu par flexbox. À l'heure actuelle, la prise en charge du navigateur est décevante, mais elle est prise en charge sous une forme ou une autre dans tous les navigateurs actuels.

Prise en charge du navigateur: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Contexte sur Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

10
Scott Joudry

Quelle que soit la durée de cette réponse, quelle que soit l’année en question, quiconque s’y retrouverait voudra peut-être simplement essayer.

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

La prise en charge du navigateur pour flexbox est bien meilleure que lorsque @scottjoudry a posté sa réponse ci-dessus, mais vous pouvez toujours envisager de préfixer ou d’autres options si vous essayez de prendre en charge des navigateurs beaucoup plus anciens. caniuse: flex

7
flyingace

Il n'y a pas de réponses parfaites ici, à l'exception de la réponse d'Asaf qui ne fournit aucun code ni exemple, donc j'aimerais contribuer au mien ...

Pour que vertical-align: middle; fonctionne, vous devez utiliser display: table; pour votre élément ul et display: table-cell; pour les éléments li et vous pouvez utiliser vertical-align: middle; pour les éléments li.

Vous n'avez pas besoin de fournir explicitement margins, paddings pour placer votre texte verticalement au centre.

Démo

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}
5
Mr. Alien

Comme expliqué ici: https://css-tricks.com/centering-in-the-unknown/ .

Comme testé dans la pratique, la solution la plus fiable et la plus élégante consiste à insérer un élément en ligne assistent dans l'élément <li /> en tant que 1er enfant, cette hauteur devant être définie sur 100% (de la hauteur de son parent, le <li />) et son vertical-align mettre au milieu. Pour ce faire, vous pouvez mettre un <span />, mais le moyen le plus pratique consiste à utiliser la pseudo-classe li:after.

Capture d'écran:enter image description here

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}
3
Jeff Tian

Essayez cette solution

Fonctionne mieux dans la plupart des cas

vous devrez peut-être utiliser div au lieu de li pour cela

.DivParent {
    height: 100px;
    border: 1px solid Lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

1
keshav

Solution simple pour aligner verticalement au centre ... pour moi cela fonctionne comme un charme 

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}
0
Fahad Ali