Question Comment aligner verticalement une image à l'intérieur d'une div?


Question

Comment pouvez-vous aligner une image à l'intérieur d'un contenant div?

Exemple

Dans mon exemple, je dois centrer verticalement le <img> dans le <div> avec class ="frame":

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

.frameLa hauteur de l'image est fixe et la hauteur de l'image est inconnue. Je peux ajouter de nouveaux éléments .frame si c'est la seule solution. J'essaye de faire ceci sur IE≥7, Webkit, Gecko.

Voir le jsfiddle ici


1128
2017-09-01 16:25


origine


Réponses:


Le seul (et le meilleur navigateur croisé) que je connaisse est d'utiliser un inline-block aide 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; /* this is required unless you put the helper span closely near the img */
    
    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 que cela ne vous dérange pas d'utiliser les expressions IE, vous pouvez utiliser un pseudo-élément et l'ajouter à IE en utilisant une expression pratique, qui s'exécute une seule fois par élément. il n'y aura pas de 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 ça marche:

  1. Quand vous avez deux inline-block éléments proches les uns des autres, vous pouvez aligner chacun à côté de l'autre, donc avec vertical-align: middle vous aurez quelque chose comme ça:

    Two aligned blocks

  2. Lorsque vous avez un bloc avec une hauteur fixe (en px, em ou autre unité absolue), vous pouvez définir la hauteur des blocs internes %.

  3. Donc, en ajoutant un inline-block avec height: 100% dans un bloc avec une hauteur fixe serait aligner un autre inline-block élément en lui (<img/> dans votre cas) verticalement près de lui.

1818
2017-09-05 16:04



Cela pourrait être utile:

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

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


447
2017-07-30 05:57



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

démo: https://jsbin.com/lidebapomi/edit?html,css,output

preview


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;
}

373
2017-09-18 09:53



Solution de 3 lignes:

position: relative;
top: 50%;
transform: translateY(-50%);

Cela s'applique à tout.

De ici.


155
2018-02-10 04:48



Une solution CSS PURE:

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;  
}

Key stuff

// 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

125
2017-09-05 11:09



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

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

95
2017-11-22 16:03



Pour ceux qui ont atterri sur ce post et qui sont intéressés par une solution plus moderne, et qui n'ont pas besoin de supporter les navigateurs existants, vous pouvez le faire:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Voici un stylo: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


89
2017-12-29 20:13



Vous pouvez essayer de définir le CSS de PI à display: table-cell; vertical-align: middle;


19
2017-09-07 16:31



Il y a un super facile solution avec flexbox!

.frame {
    display: flex;
    align-items: center;
}

12
2018-04-21 00:56