web-dev-qa-db-fra.com

Comment aligner verticalement une image dans une div?

Question

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

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>

La hauteur de .frame est fixe et celle de l'image est inconnue. Je peux ajouter de nouveaux éléments dans .frame si c'est la seule solution. J'essaie de faire cela sur IE≥7, Webkit, Gecko.

Voir le jsfiddle ici

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
        
<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>

cssimagevertical-alignment
1225
Arnaud Le Blanc

Le seul moyen (et le meilleur moyen pour tous les navigateurs) que je connaisse consiste à utiliser un assistant inline-block avec height: 100% et vertical-align: middle sur les deux éléments.

Il existe donc 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=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Ou, si vous ne souhaitez pas ajouter d'élément supplémentaire dans les navigateurs modernes et que l'utilisation des expressions IE ne vous dérange pas, vous pouvez utiliser un pseudo-élément et l'ajouter à IE à l'aide d'une expression pratique qui ne fonctionne qu'une fois par élément, il n'y aura donc aucun problème 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=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Comment ça marche:

  1. Lorsque vous avez deux éléments inline-block proches l'un de l'autre, vous pouvez les aligner l'un sur l'autre. Ainsi, avec vertical-align: middle, vous obtiendrez quelque chose comme ceci:

    Two aligned blocks

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

  3. Ainsi, ajouter un inline-block avec height: 100% dans un bloc de hauteur fixe alignerait un autre élément inline-block dans celui-ci (<img/> dans votre cas) verticalement près de lui.
1924
kizu

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/

473
Tahir Yasin

La solution de matejkramny est un bon début, mais les images trop grandes ont un mauvais ratio.
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;
}
421
jomo

Solution 3 lignes:

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

Cela s'applique à n'importe quoi.

De ici .

189
Jorge Orpinel

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

Trucs clés 

// 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
130
code ninja

Pour ceux qui ont atterri sur ce poste et sont intéressés par une solution plus moderne, et qui n'ont pas besoin de prendre en charge les navigateurs classiques, 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

108
Ricardo Zea

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

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

22
Yeodave

En outre, vous pouvez utiliser Flexbox pour obtenir le résultat correct:

.parent {
  align-items: center; /* for vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

19
tourniquet

Il existe une solution super facile avec flexbox! 

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

Vous pouvez essayer ci-dessous le code 

.frame{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
} 
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

14
Santosh Khalse

Solution d'image d'arrière-plan J'ai supprimé l'élément d'image dans son ensemble et je l'ai défini comme arrière-plan du div avec une classe de .frame

http://jsfiddle.net/URVKa/2/

cela fonctionne au moins bien sur IE8, FF6 et Chrome13

J'ai vérifié, cette solution ne fonctionnera pas pour réduire les images plus grandes que 25px hauteur. Il existe une propriété appelée background-size qui définit la taille de l'élément, mais c'est CSS3 qui serait en conflit avec l'exigence IE7.

Je vous conseillerais soit de rétablir les priorités de votre navigateur et de concevoir les meilleurs navigateurs disponibles, soit d'obtenir un code serveur pour redimensionner les images si vous souhaitez utiliser cette solution

14
Benjamin Udink ten Cate

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

La propriété key est display: table-cell; pour .frame. Div.frame est affiché comme suit, vous devez donc l'envelopper dans un élément de bloc.

Cela fonctionne dans FF, Opera, Chrome, Safari et IE8 +.

METTRE À JOUR

Pour IE7, nous devons ajouter une expression CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
11
Webars

Vous pourriez faire ceci:

démo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* here.. */
    left: 50%;           /* here... */
    position: absolute; /* and here */
}


javascript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
11
Joseph Marikle

Essayez cette solution avec avec pure css http://jsfiddle.net/sandeep/4RPFa/72/ Peut-être le principal problème de votre code HTML. Votre citation non utilisée lorsque vous définissez class & image height dans votre code HTML. 

CSS:

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    position:relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom:20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;
    margin:0 auto;
    max-height:25px;
}

MODIFIER :

Lorsque je travaille avec la balise img, il laisse 3px to 2px espace de top. Maintenant, je diminue line-height & c'est du travail . css:

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height:0;    
        max-height:25px;
        max-width:160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* webkit browsers */
    }

la propriété line-height est render différemment selon les navigateurs. Alors; nous devons définir différents navigateurs de propriété line-height 

Consultez cet exemple http://jsfiddle.net/sandeep/4be8t/11/

Consultez cet exemple concernant line-height différent dans différents navigateurs différences de hauteur en entrée dans Firefox et Chrome

7
sandeep

Pas sûr de IE, mais sous Firefox et Chrome, si vous avez une img dans un conteneur div, le CSS suivant devrait fonctionner. Au moins pour moi ça marche bien:

div.img-container {
    display:table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}
7
slava

Ma solution: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}
6
Ilya Lysenko

Moyen facile qui fonctionne pour moi:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Fonctionne très bien pour Google Chrome. Essayez celui-ci sur un autre navigateur.

5
DOCTYPE HTML

Cela fonctionne pour les navigateurs modernes (2016 au moment de l'édition), comme indiqué dans cette démo sur codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Il est très important de donner une classe aux images ou d'utiliser l'héritage pour cibler les images dont vous avez besoin d'être centrées. Dans cet exemple, nous avons utilisé .frame img {} pour que seules les images enveloppées par un div avec une classe de .frame soient ciblées.

5
anglimasS

SOLUTION UTILISANT UNE TABLE ET UNE CELLULE DE TABLE

Parfois, il convient de résoudre ce problème en affichant sous la forme table/table-cellule. Par exemple, un écran de titre rapide. C'est un moyen recommandé par W3 également. Je vous recommande de vérifier ce lien appelé Centrer les choses de W3C.org

Les astuces utilisées ici sont:

  • Conteneur de positionnement absolu affiché sous forme de tableau
  • Vertical aligné au centre du contenu affiché sous forme de cellule de tableau

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center"> PEACE IN THE WORLD </h1>
 </div>
</div>

Personnellement, je suis en désaccord sur l'utilisation des aides à cette fin

5
Sam

Si vous pouvez vivre avec des marges de la taille d'un pixel, ajoutez simplement font-size: 1px; au .frame. Mais rappelez-vous que maintenant, sur le .frame 1em = 1px, vous devez également définir la marge en pixels.

http://jsfiddle.net/feeela/4RPFa/96/

EDIT: maintenant ce n’est plus centré sur Opera…

4
feeela

Pour centrer une image dans un conteneur (il peut s'agir d'un logo) à côté d'un texte comme celui-ci:

 enter image description here

Fondamentalement, vous envelopper l'image 

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

4
juliangonzalez

vous pouvez utiliser ceci:

.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;

}

2
Masoume Karvar

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

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

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

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

En utilisant les méthodes table et table-cell, spécialement parce que vous ciblez également d'anciens navigateurs, je crée un extrait de code que vous pouvez exécuter et vérifier le résultat: 

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

2
Alireza

Imaginez que vous avez

<div class="wrap">
    <img src="#">
</div>

Et css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
0
fdrv

Ce code fonctionne bien pour moi.

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
 .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>
0
sandeep kumar

Je cherchais une réponse similaire et certaines des suggestions ont calé l'image à gauche ou le rapport vertical calé sur l'image, alors j'ai proposé cette solution ... Elle centre le contenu verticalement et horizontalement.

 .div{
    position: relative;
    overflow: hidden;
 }
 .bantop img {
    position: absolute;
    margin: auto;
    width: 103%;
    height: auto;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
  }

Je l'utilise sur plusieurs projets et ça marche comme une sharm

0
Samuel Ramzan

celui-ci, ça va?

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

et vous pouvez varier font-size

0
th3pirat3

La meilleure solution est que

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}
0
Kumar

Je me suis amusé à utiliser le rembourrage pour aligner le centre. Vous devrez définir la taille du conteneur externe de niveau supérieur, mais le conteneur interne doit être redimensionné et vous pouvez définir le remplissage avec différentes valeurs de pourcentage.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}
0
steven iseki

L'ancien lien JSFiddle que j'ai posté ici ne fonctionnait plus, c'est probablement la raison du vote négatif. Pour que cette réponse soit valable, je souhaite toujours publier à nouveau la solution jQuery. Cela fonctionne pour tous les éléments auxquels la classe v_align est appliquée. Elle sera centrée verticalement dans le parent et sera recalculée lors du redimensionnement de la fenêtre.

Lien vers le JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}
0
Chris

Vous voulez aligner une image après un texte/titre et les deux sont à l'intérieur d'un div?

Voir sur JSfiddle ou Snippet Code.

Assurez-vous simplement d'avoir un identifiant ou une classe pour tous vos éléments (div, img, titre, etc.).

Pour moi, cette solution fonctionne sur tous les navigateurs (pour les appareils mobiles, vous devez adapter votre code avec: @media).

h2.h2red {
color: red; 
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;  
display: block;  
float: left;/*If you want to allign the text with an image on the same row*/  
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>

0
mariusfv