Comment aligner verticalement une image dans une div?

Question

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

.frame 's la hauteur est fixe et l'image en hauteur est inconnue. Je peux ajouter de nouveaux éléments dans .frame si c'est la seule solution. J'essaie de le faire 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>
1172
demandé sur Nitin Bisht 2011-09-01 20:25:51
la source

30 ответов

la seule (et la meilleure cross-browser) façon que je sais est d'utiliser un helper inline-block avec height: 100% et vertical-align: middle sur les deux éléments.

il y a 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 voulez pas avoir un élément supplémentaire dans les navigateurs modernes et ne vous gênez pas en utilisant des expressions IE, vous pouvez utiliser un pseudo-élément et l'ajouter à IE en utilisant une Expression pratique, qui ne s'exécute qu'une fois par élément, de sorte qu'il n'y aura pas de problèmes de performance:

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 cela fonctionne:

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

    Two aligned blocks

  2. lorsque vous avez un bloc avec une hauteur fixe (dans px , em ou autre unité absolue), vous pouvez définir la hauteur des blocs intérieurs dans % .

  3. ainsi, en ajoutant un inline-block avec height: 100% dans un bloc avec une hauteur fixe alignerait un autre élément inline-block ( <img/> dans votre cas) verticalement près d'elle.
1860
répondu kizu 2018-08-09 21:58:03
la source

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/

453
répondu Tahir Yasin 2016-07-05 08:23:52
la source

la solution de matejkramny est un bon début, mais les images surdimensionnées ont un mauvais ratio.

Voici ma fourchette:

Démo: https://jsbin.com/lidebapomi/edit?html,css, sortie

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;
}
394
répondu jomo 2016-03-17 14:14:30
la source

3 de la ligne de solution:

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

cela s'applique à tout.

à Partir de ici .

167
répondu Jorge Orpinel 2015-04-19 06:00:10
la source

a PURE CSS Solution:

http://jsfiddle.net/3MVPM /

The 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;  
}
"151920920 de la Clé" 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
127
répondu code ninja 2011-09-05 17:36:26
la source

de cette façon vous pouvez centrer une image verticalement ( demo ):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}
95
répondu Zoli Szabó 2015-03-18 16:39:13
la source

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 hérités, 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

95
répondu Ricardo Zea 2018-03-20 19:56:08
la source

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

19
répondu Yeodave 2011-09-07 20:31:30
la source

il y a une super easy solution avec flexbox!

.frame {
    display: flex;
    align-items: center;
}
14
répondu BBlackwo 2016-04-21 03:56:41
la source

image d'arrière-plan solution J'ai supprimé l'élément image et l'ai placé 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 à rétrécir les images plus grand que 25px hauteur. Il y a une propriété appelée background-size qui ne définit la taille de l'élément, mais C'est CSS3 qui entrerait en conflit avec l'exigence IE7.

je vous conseillerais soit de refaire les priorités et la conception de votre navigateur pour les meilleurs navigateurs disponibles, ou obtenir un certain code serverside pour redimensionner les images si vous voulez utiliser cette solution

12
répondu Benjamin Udink ten Cate 2016-10-17 21:41:15
la source

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>
12
répondu Santosh Khalse 2017-01-24 11:15:37
la source

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
répondu Joseph Marikle 2016-10-17 21:42:23
la source

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é clé est display: table-cell; for .cadre. Div.le cadre est affiché comme inline avec ceci, donc vous devez l'envelopper dans un élément de bloc.

cela fonctionne en FF, Opéra, Chrome, Safari et IE8+.

UPDATE

pour IE7 nous devons ajouter une expression css:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
10
répondu Webars 2013-08-31 22:36:12
la source

pas sûr de IE, mais sous Firefox et Chrome, si vous avez un img dans un conteneur div , le css suivant devrait fonctionner. Au moins pour moi fonctionne bien:

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

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}
6
répondu slava 2014-01-29 11:10:19
la source

essayer cette solution avec CSS pur http://jsfiddle.net/sandeep/4RPFa/72 / Peut - être le problème principal avec votre html. Vous n'utilisez pas la citation lorsque vous définissez c lass et image height dans votre 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;
}

EDIT :

quand je travaille avec l'étiquette img c'est le congé 3px to 2px espace de top . Maintenant, je baisse line-height et c'est le 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. Si; nous devons définir différent line-height biens navigateurs

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

vérifier cet exemple à propos de line-height different in different browsers différences de hauteur d'entrée dans Firefox et Chrome

5
répondu sandeep 2017-05-23 13:31:35
la source

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;
}
5
répondu 0x100 2013-08-23 09:57:45
la source

vous pouvez également 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>
5
répondu tourniquet 2018-08-24 16:09:43
la source

la voie facile qui travaille 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.

4
répondu DOCTYPE HTML 2016-01-13 21:39:40
la source

cela fonctionne pour les navigateurs modernes (2016 au moment de l'édition) comme indiqué dans ce 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 que vous donniez une classe aux images ou que vous utilisiez l'héritage pour cibler les images dont vous avez besoin centrées. Dans cet exemple, nous avons utilisé .frame img {} de sorte que seules les images enveloppées par un div avec une classe de .frame seraient ciblées.

4
répondu anglimasS 2016-10-17 21:39:15
la source

SOLUTION USING TABLE & TABLE CELL

parfois, il doit être résolu en affichant comme tableau / table-cellule. Par exemple un écran titre rapide. C'est un moyen recommandé par W3 aussi. Je vous recommande de vérifier ce lien appelé centrage des choses de W3C.org

les conseils utilisés ici sont:

  • positionnement Absolu conteneur affiche comme le tableau
  • vertical aligné sur centre du contenu affiché sous forme de table-cell

.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 ne suis pas d'accord sur l'utilisation des helpers à cette fin

4
répondu Sam 2017-04-12 22:51:05
la source

si vous pouvez vivre avec des marges de taille pixel, il suffit d'ajouter font-size: 1px; au .frame . Mais rappelez-vous, que maintenant sur le .frame 1em = 1px, ce qui signifie, Vous devez définir la marge en pixels aussi.

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

EDIT: maintenant c'est pas plus centrée à l'Opéra...

3
répondu feeela 2011-09-07 20:49:53
la source

pour centrer une image à l'intérieur d'un conteneur (ce pourrait être un logo) en plus 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>
3
répondu juliangonzalez 2017-08-31 04:36:16
la source

j'ai eu le même problème. Cela me convient:

<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>
1
répondu algreat 2013-01-26 23:46:52
la source

en utilisant table et table-cell méthode faire le travail, surtout parce que vous ciblant certains vieux navigateurs ainsi, je crée un extrait pour vous que vous pouvez l'exécuter et de 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> 
1
répondu Alireza 2017-06-28 16:51:25
la source

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;

}

1
répondu Masoume Karvar 2018-09-19 15:52:17
la source

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
répondu Kumar 2015-02-03 09:16:33
la source

j'ai joué avec l'utilisation du rembourrage pour l'alignement du centre. Vous aurez besoin de définir le niveau supérieur de la taille du conteneur extérieur, mais le conteneur intérieur devrait redimensionner, et vous pouvez définir le padding à différentes valeurs de pourcentage.

jsfiddle

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

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

img {
  width: 100%;
}
0
répondu steven iseki 2015-12-15 08:24:03
la source

l'ancien lien JSFiddle que j'ai posté ici ne fonctionnait plus, c'est probablement la raison de la baisse. Juste pour le bien de ceci étant une réponse valable je veux encore poster la solution de jQuery à nouveau. Cela s'applique à tous les éléments auxquels s'applique la classe v_align . Il sera vertical centré dans le parent et sur le redimensionnement de la fenêtre, il sera recalculé.

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
répondu Chris 2016-07-19 12:17:33
la source

et celui-ci?

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

et vous pouvez varier font-size

0
répondu th3pirat3 2017-06-02 04:17:32
la source

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

, Voir sur JSfiddle ou Exécuter du Code Extrait.

assurez-vous D'avoir un ID ou une classe à tous vos éléments(div, img, titre, etc).

pour moi fonctionne cette solution 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
répondu mariusfv 2017-06-08 10:01:33
la source

Autres questions sur css vertical-alignment image