web-dev-qa-db-fra.com

Aligner verticalement le texte dans l'élément div

Je sais que cette question a été posée à mort, mais rien dans la recherche n'a fonctionné pour moi.

Vous connaissez l'accord, il me faut un élément div pour aligner le texte verticalement mais rien n'a fonctionné (position: absolute; top: 50%; margin-top: -x; display: table-cell; vertical-align: middle ;etc.)

Voici ce avec quoi je travaille (désolé pour le CSS en ligne). Quoi qu'il en soit, je voudrais utiliser line-height mais le texte peut avoir une ou deux lignes. Il convient d’aligner verticalement l’image avec une hauteur maximale de 30px (30x50).

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
 <div style="float:left;width:55px;height:40px;">
 <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>
 </div>
 <div style="float:right;width:155px;font-size:0.7em;height:40px;">
 <a href="link">This is the text to vertically align</a>
 </div>
 </div>
htmlcssvertical-alignment
11
Tom

L'idée vient de ici et devrait fonctionner pour tous les navigateurs.

<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;">
    <div style="float: left; width: 55px; height: 40px;">
        <a href="link">
            <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg"
                alt="" /></a>
    </div>
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;">
                <a href="link">This is the text to vertically align</a>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
7
Yiğit Yener

Une autre chose que vous pouvez faire. Si ce n'est qu'une ligne de texte dans le div, vous pouvez utiliser line-height

exemple

div {
    line-height:40px;
}
9
brenjt

Vous devez faire comme ça:

http://jsfiddle.net/rathoreahsan/5u9HY/

Utilisez fixed height au lieu de padding dans la division principale. et utiliser la hauteur de ligne pour les divisions gauche et droite

3
Ahsan Rathod

Voici une version propre de la solution

<div style="background: yellow">
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;">
    <div style="display: table-cell; vertical-align: middle;">
        <div style="">
            <a href="link">This is the text to vertically align</a>
        </div>
    </div>
</div>
<div style="clear: both"></div>

http://jsfiddle.net/5y4Nb/

2
Yock

Cela ressemble à un problème de float commun qui peut être corrigé avec un clearfix ou, comme je l’ai fait dans l’extrait de code suivant, avec une hauteur fixe du wrapper.

J'ai également assis un line-height des divs flottants et l'ai fait un peu plus large.

Regarde ça:

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px">  <div style="float:left;width:55px;height:40px;">  <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>  </div>  <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px">  <a href="link">This is the text to vertically align</a>  </div>  </div>

http://jsfiddle.net/YqxPZ/3/

0
Mattias Alfborger

Si vous avez besoin de ne montrer que quelques lignes d’un texte très long, voici le Fiddle . Ajustez la hauteur selon vos besoins.

    .container-text {
    height:40px;
    width:180px;
    overflow-y:hidden;    
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}
0
ihimv