Texte d'alignement Vertical dans l'é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. J'aimerais que le texte soit centré dans l'élément, pas dans 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 pas de propriété CSS3 pour cela? Je serais prêt à ajouter un <span> dans mais je vraiment ne pas ajouter plus de balisage que cela.

Merci!

37
demandé sur Black 2011-03-02 14:05:04
la source

7 ответов

selon le CSS Flexible Box Layout Module , vous pouvez déclarer l'élément a comme un Flex container (voir figure) et utiliser align-items à verticalement aligner le texte le long de axe transversal (qui est perpendiculaire à l'axe principal ).

enter image description here

C'est tout ce dont vous avez besoin à faire est de

display: flex;
align-items: center;

prise en charge du Navigateur considérations

Chrome

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

Firefox

Set layout.css.flexbox.enabled à true .

vous pouvez aussi utiliser

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

sachez juste que ce n'est pas css3-flexbox et qu'il ne s'enroule pas.

IE

est-ce que quelqu'un peut vérifier la syntaxe IE et l'ajouter ici? Vous pouvez essayer la syntaxe de Avancée de la croix-navigateur flexbox .

voir ce violon (N'oubliez pas de mettre layout.css.flexbox.enabled à true si vous êtes sur FF.)

70
répondu melhosseiny 2013-06-18 05:40:43
la source

vous pouvez aussi essayer

a {
  height:100px;
  line-height:100px;
}
45
répondu ericbae 2012-02-23 08:00:25
la source
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

12
répondu Vlad 2014-04-04 13:26:52
la source

vous pouvez essayer le display: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;
}

s'il vous Plaît consulter le démo .

4
répondu Airen 2013-06-18 05:08:28
la source

est-ce que l'utilisation de rembourrage serait acceptable pour vos besoins?: http://jsfiddle.net/sm8jy / :

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}
2
répondu AJJ 2011-03-02 14:14:08
la source

Voici la solution générale en utilisant juste CSS, avec deux variantes. Le premier centre verticalement dans la ligne courante, le second centre dans un élément de 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 de bloc en ligne, par exemple <img> . Vous devez changer l'attribut display d'un élément en inline-block pour qu'il fonctionne. Dans l'exemple, la hauteur de la ligne s'étend pour s'adapter à la durée. Si vous souhaitez utiliser un contenant élément, comme un <div> , définit l'attribut ligne-hauteur comme étant la même que la hauteur. Attention, vous devrez spécifier line-height: normal sur le contenu <span> , ou il héritera de l'élément contenant.

1
répondu Steve11235 2012-06-13 23:28:09
la source

merci à Vlad réponse pour l'inspiration; testé et de travail sur IE11, FF49, Opera40, Chrome53

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

centre dans toutes les directions bien même avec l'emballage de texte, les sauts de ligne, les images, etc.

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
répondu RozzA 2017-05-23 14:47:00
la source

Autres questions sur