web-dev-qa-db-fra.com

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

Je sais que l’alignement vertical est toujours demandé, mais je ne semble pas être en mesure de trouver une solution pour cet exemple particulier. Je voudrais que le texte soit centré dans l'élément, pas l'élément lui-même:

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 disposé à ajouter un <span> dans mais je ne veux vraiment pas ajouter plus de balisage que cela.

Merci!

htmlcsshtml5css3
37
user623520

Selon le module de disposition de boîte flexible CSS , vous pouvez déclarer l'élément a en tant que conteneur flex (voir figure) et utiliser align-items pour verticalement aligner le texte le long de l'axe croix (perpendiculaire à l'axe principal ).

enter image description here

C'est tout ce que vous devez faire est 

display: flex;
align-items: center;

Considérations relatives à la prise en charge du navigateur

Chrome

display: -webkit-flex;
-webkit-align-items: center;

Firefox

Définissez layout.css.flexbox.enabled sur true.

Sinon, vous pouvez toujours utiliser 

display: -moz-box;
-moz-box-align: center;

Sachez simplement que ce n'est pas css3-flexbox et que cela ne sera pas bouclé.

IE

Quelqu'un peut-il vérifier la syntaxe IE et l'ajouter ici? Vous pouvez essayer la syntaxe de Flexbox avancée multi-navigateurs .

Voir ceci (violon) (n'oubliez pas de définir layout.css.flexbox.enabled sur true si vous êtes sur FF.)

71
melhosseiny

Vous pouvez aussi essayer

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

}

12
Vlad

Vous pouvez essayer l’affichage: inline-block et: after.Like this:

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

S'il vous plaît voir la démo .

4
Airen

Est-ce que l’utilisation du rembourrage vous conviendrait ?: _ { http://jsfiddle.net/sm8jy/ :

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

Voici la solution générale utilisant uniquement CSS, avec deux variantes. Le premier centre verticalement dans la ligne courante, le second centre dans un bloc.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

Si j'ai bien compris, l'alignement vertical ne s'applique qu'aux éléments en-ligne, par exemple, <img>. Vous devez changer l'attribut d'affichage d'un élément en inline-block pour que cela fonctionne. Dans l'exemple, la hauteur de ligne augmente pour s'adapter à la plage. Si vous souhaitez utiliser un élément contenant, tel que <div>, définissez l'attribut line-height de la même manière que la hauteur. Attention, vous devrez spécifier line-height: normal sur le <span> contenu, ou ce dernier héritera de l'élément conteneur.

1
Steve11235

Vous pouvez également utiliser inline-table à côté de table-cell si vous souhaitez centrer vos éléments verticalement et horizontalement. Ci-dessous un exemple d'utilisation de ces propriétés d'affichage pour créer un menu:

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

Cela fonctionne en définissant display: inline-table; sur tous les <li>, puis en appliquant display: table-cell; et vertical-align: middle; aux enfants <a>. Cela nous donne le pouvoir de la balise <table> sans l’utiliser.

Cette solution est utile si vous ne connaissez pas la hauteur de votre élément.

La compatibilité est très bonne (par rapport à caniuse.com ), avec Internet Explorer> = 8.

0
Anwar

avec merci à answer de Vlad pour son inspiration; testé et fonctionne sur IE11, FF49, Opera40, Chrome53

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

se centre bien dans toutes les directions même avec le retour à la ligne, les sauts de ligne, les images, etc.

J'ai eu la fantaisie et fait un extrait 

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long Word*/
  Word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}
<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences

0
RozzA