alignement vertical ne fonctionne pas

Question

est-il possible d'aligner verticalement une image venant à l'intérieur d'une étiquette d'ancrage? J'utilise deux étiquettes d'ancrage à l'intérieur d'un DIV .. chacun devrait s'aligner verticalement au centre. en un J'utilise une image dans un autre texte?

PS: sans ligne hauteur

Answer 1

Vous ne pouvez pas aligner verticale dans une balise div mais vous pouvez avec une cellule de tableau. Vous pouvez contourner ce problème si vous pouvez corriger la hauteur de votre image et de son conteneur.

Answer 2

L'alignement vertical ne se comporte pas comme vous le pensez dans les divs car il ne fonctionne que pour les cellules de tableau.

Il y a un nombre de CSS « ​​hacks » pour obtenir que pour travailler, comme this one ou this one

Answer 3

Consultez l'adresse suivante, il peut tenir les réponses dont vous avez besoin ainsi que vous donner une compréhension globale de l'alignement vertical propriété.

http://css-tricks.com/what-is-vertical-align/

Answer 4

La solution est très simple en utilisant CSS.

Voici un exemple:

#anySection { 
    background: white url(../images/anyImage.jpg) no-repeat center; 
    height: 500px; 
    width: 500px 
} 

Markup:

<div id="anySection"></div> 

Vous obtiendrez un 500 x 500 px section avec votre image centrée à l'intérieur.

Answer 5

Essayez ceci:

div{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 6

Depuis souligné de personne dehors, vous obtenez des comportements différents en fonction du DOCTYPE.

(Dans mon cas, la transition n'a pas été doctype alignement vertical des éléments en ligne sans nœuds texte entre frères et soeurs, alors que html5 fait.)

Answer 7

J'ai eu le même problème. Cela fonctionne pour moi:

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div> 

Answer 8

Cela semble fonctionner pour moi:

/* Internet Explorer 10 */ 
    display:-ms-flexbox; 
    -ms-flex-pack:center; 
    -ms-flex-align:center; 

/* Firefox */ 
display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari, Opera, and Chrome */ 
display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

/* W3C */ 
display:box; 
box-pack:center; 
box-align:center; 

Answer 9

<div style="border:1px solid #000;height:200px;position: relative;"> 
    <div style="position: absolute;top: 50%;left:50%;"> 
    hello mahesh // Div Body part 
    </div> 
</div> 

Fiddle demo

essayer.