1404 votes

Comment aligner verticalement une image à l'intérieur de la div

Comment bien vertical-align cette image dans l' .frame élément:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame's la hauteur est fixe et l'image en hauteur est inconnue. Je peux ajouter de nouveaux éléments en .frame si c'est la seule solution. Je suis en train de le faire sur IE≥7, Webkit, Gecko.

Voir le jsfiddle ici: http://jsfiddle.net/4RPFa/61/

2087voto

kizu Points 15989

Le seul (et le meilleur de la croix-navigateur) de façon que je sais, c'est d'utiliser un inline-block helper avec height: 100% et vertical-align: middle sur les deux éléments.

Donc, il y a une solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Ou, si vous ne voulez pas avoir un élément supplémentaire dans les navigateurs modernes et n'avez pas l'esprit en utilisant IE expressions, vous pouvez utiliser un pseudo-élément et l'ajouter à la d'IE à l'aide d'une Expression pratique, qui s'exécute qu'une seule fois par élément, donc il n'y aura pas des problèmes de performances:

La solution avec :before et expression() pour IE: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=250 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=25 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=23 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=21 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=19 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=17 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=15 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=13 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=11 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=9 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=7 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=5 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=3 /></div>

Comment il fonctionne:

  1. Lorsque vous avez deux inline-block éléments à proximité les uns des autres, vous pouvez les aligner les uns à l'autre côté, donc, avec vertical-align: middle , vous obtiendrez quelque chose comme ceci:

    Two aligned blocks

  2. Lorsque vous avez un bloc avec une hauteur fixe (en px, em ou autre absolu de l'unité), vous pouvez régler la hauteur des blocs intérieurs en %.

  3. Ainsi, l'ajout d'un inline-block avec height: 100% dans un bloc avec hauteur fixe permettrait d'aligner un autre inline-block élément (<img/> dans votre cas) à la verticale près d'elle.

498voto

Tahir Yasin Points 3525

Cela peut être utile:

div {
    position:relative;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

Référence : http://www.student.oulu.fi/~laurirai/www/css/moyen/

467voto

HansWürstchen Points 323

matejkramny de la solution est un bon début, mais surdimensionné images ont un mauvais rapport.
Voici ma fourchette:

démo: http://jsfiddle.net/CKwUs/


HTML:

<div class="frame">
  <img src=foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

137voto

matejkramny Points 1853

Un PUR CSS Solution:

http://jsfiddle.net/3MVPM/

Le CSS:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

Clé de trucs

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

101voto

2astalavista Points 7092

De cette façon, vous pouvez centrer une image à la verticale (démo):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X