vertical align ne fonctionne pas

est-il possible d'aligner verticalement une image qui vient à l'intérieur d'une balise d'ancrage ?

Je suis l'aide de deux balises d'ancrage à l'intérieur d'un DIV.. chacun doit verticalement aligner au centre.
dans celui que je suis en utilisant une image dans un autre texte ?

PS: sans hauteur de la ligne

OriginalL'auteur Joemon | 2009-12-14

  1. 11

    Vertical align ne se comportent pas comme vous le pensez dans les divs depuis il ne fonctionne que pour les cellules de tableau.

    Il y a des numéros de CSS "hacks" pour obtenir que cela fonctionne comme cette une ou cette une

    +1 belle référence.
    cette réponse est OBSOLÈTE...il travaille avec des objets et inline-block, mais il doit être défini sur l'objet lui-même et non pas sur celle du parent. et puis aussi, il ne fonctionne pas toujours...

    OriginalL'auteur marcgg

  2. 5

    Essayez ceci:

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

    OriginalL'auteur Jason Ellis

  3. 3

    Vous ne pouvez pas verticale aligner à l'intérieur d'une balise div, mais vous pouvez le faire avec une cellule de tableau. Vous pouvez travailler autour de lui si vous pouvez corriger la hauteur de votre image et de son récipient.

    OriginalL'auteur Rimian

  4. 3

    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;

    OriginalL'auteur Mahendra Liya

  5. 2

    La solution est très simple à l'aide de CSS.

    Voici un exemple:

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

    Balisage:

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

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

    OriginalL'auteur rafa ble

  6. 1

    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>
    Moins hacky solution qui fonctionne pour moi. bien que pas de réponse.

    OriginalL'auteur algreat

  7. 0

    Consulter l'url suivante, il peut tenir les réponses dont vous avez besoin ainsi que de vous donner une compréhension globale de la verticale de la propriété align.

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

    OriginalL'auteur Adam C

  8. 0

    Depuis personne ne l'a signalé, vous obtenez des comportements différents selon le DOCTYPE.

    (Dans mon cas, la transition doctype n'est pas aligne verticalement des éléments en ligne sans frère nœuds de texte, alors que le html5 n'.)

    OriginalL'auteur Brandon Hill

  9. 0
    <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>

    Violon démo

    De l'essayer.

    OriginalL'auteur Mahesh Cheliya