CSS alignement vertical du texte à l'intérieur de li

Je suis affichant le nombre de boîtes dans une rangée avec correction de la hauteur et la largeur, généré à partir de <li> balises.
maintenant, j'ai besoin d'aligner le texte à la verticale du centre.
Le CSS vertical-align n'a pas d'impact, peut-être que je manque quelque chose???

Je ne suis pas à la recherche pour des figures à l'aide de (margin, padding, la hauteur de la ligne), ceux-ci ne fonctionnera pas parce que certains textes sont longs et se cassera en deux lignes.

S'il vous plaît trouver le code:

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>

vous pouvez avoir besoin de fournir plus d'informations. Les boîtes de la même hauteur? Êtes-vous aligner le texte à l'intérieur des boîtes dans le li? "parce que certains textes sont longs...deux lignes" ??? Peut-être une capture d'écran ou un violon en aide.
J'ai Juste essayé de poster une capture d'écran, mais il ne permet pas de moi, comme mon compte est nouveau.

InformationsquelleAutor AK4668 | 2011-12-17

92

Définir le parent avec display: table et l'élément lui-même avec vertical-align: middle et display: table-cell.
- +1 pour l'utilisation de l'affichage de la table/table-cell. Ne semble pas beaucoup de gens sont au courant de leur existence.
- C'est à partir de W3CSchool... Remarque: Les valeurs "inline-table", "exécuter en", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" et "hériter" n'est pas pris en charge dans internet explorer 7 et versions antérieures. IE8 nécessite un !DOCTYPE. IE9 prend en charge les valeurs.
- cette solution suce car elle complètement coupée de tout effet de marge. Seule solution pour cela est de faire des tonnes de pseudo-éléments. Pourquoi ne css sucer tellement.
- Qu'en est <li>s d'obtenir en une seule ligne?
- Aussi ce n'est pas CATON l'accessibilité conforme si vous êtes en fait en ne montrant PAS de données tabulaires.
- Je connais les solutions, elles sont hacky au mieux, il ya une raison pourquoi css3 et html5 sont une chose maintenant, et ses parce que les gens n'étaient pas satisfaits avec les précédentes itérations. J'étais juste difficile de votre déclaration que "un mauvais ouvrier accuse ses outils". OMI vraiment mauvais ouvrier n'a même jamais questions les outils sont fournis avec.
InformationsquelleAutor Asaf Chertkoff
51

line-height est de savoir comment vous alignez verticalement du texte. Il est assez standard et je ne considère pas que c'est un "hack". Juste ajouter line-height: 100px à votre ul.catBlock li et ce sera très bien.

Dans ce cas, vous pouvez avoir à l'ajouter à ul.catBlock li a plutôt car tout le texte à l'intérieur de la li est également à l'intérieur d'un a. J'ai vu des choses étranges se produire lorsque vous effectuez cette opération, afin d'essayer les deux et voir ce qui fonctionne.
- J'ai utilisé la hauteur de la ligne au départ, mais lorsque le contenu est long il va se casser en 2 lignes et disons 100px écart de chaque ligne et wil faire paraître pire. est-il un autre moyen?
- Je pense qu'il y a un moyen d'avoir vertical-align: middle si vous avez display: table-cell. Je n'ai jamais utilisé. Jetez un oeil ici: phrogz.net/css/vertical-align/index.html
- Je suis d'accord avec vous.Fonctionne pour moi...
- Excellente solution - je régler le li "hauteur de ligne", pour être le même que celui de mon min-height, et le texte est aligné verticalement - au moins assez proche pour une inspection visuelle. La "table" de la solution ci-dessus est certainement pas de la sémantique, et est hackish dans la nature. Chaque fois que nous faisons cela, nous augmentons les chances de cassé affiche ou excentrique comportement quelque part dans le sensible paysage.
- Merci! Fonctionne très bien sur le <a> élément! Quelle solution la plus simple 🙂 il suffit d'ajuster à la valeur correcte et les centres verticalement parfait!
InformationsquelleAutor Logan Serman
15

Étonnamment (ou pas), le vertical-align tool qui fonctionne le mieux pour ce travail. Le meilleur de tous, pas de Javascript est nécessaire.

Dans l'exemple suivant, je suis le positionnement de la outer classe dans le milieu du corps, et l' inner classe dans le milieu de la outer classe.

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; }
```
Vertical align œuvres en alignant les centres d'éléments qui sont à côté les uns des autres. L'application 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 est la hauteur du conteneur, votre seul élément va passer à la verticale du centre de cette largeur de l'élément, donc à la verticale en le centrant. Les seules exigences sont que vous définissez à la fois des éléments inline (ou inline-block), et de définir leurs vertical-align attribut vertical-align: middle.

Remarque: Vous pouvez le remarquer dans mon code ci-dessous que mon <span> tag et <div> tag sont touchants. Parce qu'ils sont à la fois des éléments en ligne, un espace sera effectivement ajouter un espace entre le no-largeur de l'élément et de votre div, alors assurez-vous de laisser.
- Fantastique, il fait un bon sentiment. //Je ne peux pas voter votre réponse maintenant, parce que mon min réputation devrait être de 15.
- Pour ceux d'entre vous à la recherche de cette technique appliquée directement à la question jsfiddle.net/utGVt/385
InformationsquelleAutor Wex

Dans l'avenir, ce problème sera résolu par flexbox. Actuellement, la prise en charge du navigateur est triste, mais il est pris en charge dans 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;
}

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

À l'époque, cette question a été posée, je ne suis pas sûr que cela aurait été une bonne réponse, mais aujourd'hui, nous assistons à ~95% préfixé soutien alors certes, je pense que c'est une option viable.
Si vous souhaitez que le <li> éléments d'enveloppement (au lieu d'être rétréci), ajouter flex-wrap: wrap; à <ul> niveau

InformationsquelleAutor Scott Joudry

8

Toutefois de nombreuses années à la fin de cette réponse peut être, toute personne venant à travers ce pourriez vouloir essayer de
```
li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
```
Prise en charge du navigateur pour flexbox est bien meilleure qu'elle ne l'était quand @scottjoudry posté sa réponse ci-dessus, mais vous pouvez toujours envisager de précéder ou d'autres options si vous essayez de soutenir beaucoup de navigateurs plus anciens. caniuse: flex

InformationsquelleAutor flyingace
5

Il n'existe pas de réponse parfaite condition, ici, à l'exception de Asaf de la réponse, qui ne propose pas de code ni aucun exemple, alors que je voudrais apporter le mien...

Afin de faire vertical-align: middle; de travail, vous devez utiliser display: table; pour votre ul élément et display: table-cell; pour li éléments et que vous pouvez utiliser vertical-align: middle; pour li éléments.

Vous n'avez pas besoin de fournir de manière explicite margins, paddings de rendre votre texte à la verticale du milieu.

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;
}
```
- Ce n'est pas de l'aide car la seule raison pour laquelle il a été aligné à la verticale est parce que vous a forcé avec un rembourrage sur la balise
- Et où avez-vous vu padding dans mon code?
- Je vais me répéter mais que le seul problème avec cette solution est que la marge les règles sont ignorées.
InformationsquelleAutor Mr. Alien

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

Testé dans la pratique réelle, la plus fiable, mais élégant, la solution consiste à insérer un assistant élément inline dans le <li /> élément que le 1er enfant, dont la hauteur doit être réglé à 100% (de sa mère, la hauteur, la <li />), et son vertical-align réglé sur moyen. Pour ce faire, vous pouvez mettre un <span />, mais le moyen le plus pratique est d'utiliser li:after pseudo classe.

Capture d'écran:
CSS alignement vertical du texte à l'intérieur de li

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;
}

InformationsquelleAutor Jeff Tian

Donner cette solution a essayer

Qui fonctionne le mieux dans la plupart des cas

vous pourriez avoir à utiliser div au lieu de li pour que

CSS:

.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%;
}

HTML:

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Pourquoi ce besoin d'un divHelper à vertical-align? Je l'ai vu sur un autre sujet, mais je ne comprends pas pourquoi il n'a pas l'aligner auto sans une autre div..

InformationsquelleAutor keshav

Solution Simple pour le vertical align milieu... pour moi, il 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;}

InformationsquelleAutor Fahad Ali

Vous devez vous connecter pour publier un commentaire.