Alignement vertical du texte dans un élément de bloc

Question

Je sais que la question de l'alignement vertical est toujours posée, mais je ne parviens pas à trouver une solution pour cet exemple particulier. J'aimerais que le texte soit centré dans l'élément, et non que l'élément soit lui-même centré :

HTML :

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS :

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

N'y a-t-il vraiment aucune propriété CSS3 pour cela ? Je serais prêt à ajouter un <span> mais je ne veux vraiment pas ajouter plus de balises que cela.

Merci !

Answer 1

Según el Module CSS de mise en page de boîtes flexibles vous pouvez déclarer le a comme un élément conteneur souple (voir figure) et utiliser align-items a verticalement aligner le texte le long de la axe transversal (qui est perpendiculaire à la axe principal ).

Tout ce que vous devez faire, c'est :

display: flex;
align-items: center;

Voir ceci violon .

Answer 2

Vous pouvez également essayer

a {
  height:100px;
  line-height:100px;
}

Answer 3

li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

Answer 4

Vous pouvez essayer l'affichage:inline-block et :after.comme ceci :

HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

Veuillez consulter le Démonstration .

Answer 5

L'utilisation du rembourrage conviendrait-elle à vos besoins ? http://jsfiddle.net/sm8jy/ :

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}