1721 votes

arnaud576875 avatar

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

Demandé el 1 de Septembre, 2011
Quand la question a-t-elle été
216559 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Comment aligner une image à l'intérieur d'un conteneur ? div ?

Exemple

Dans mon exemple, j'ai besoin de centrer verticalement les <img> dans le <div> con class ="frame " :

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

.frame La hauteur de l'image est fixe et la hauteur 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 Internet Explorer 7 et plus, WebKit, Gecko.

Voir le jsfiddle aquí .

.frame {
    height: 25px;      /* Equals maximum 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>
Demandé el 1 de Septembre, 2011 par arnaud576875

4 votes

Avatar de Sam

Bonjour, désolé mais je ne suis pas d'accord sur le fait que l'utilisation d'une aide ici soit la solution la plus valable. Mais ce n'est pas la seule solution. D'autres solutions sont également supportées par les navigateurs. Je propose une solution ici en bas de stackoverflow.com/a/43308414/7733724 et W3C.org à propos des informations. Vous pouvez vérifier. Salutations

Commenté el 12 de Avril, 2017 par Sam

0 votes

Avatar de QMaster

La lecture de l'article Centring Things sur le W3C sera utile : w3.org/Style/Exemples/007/center.fr.html

Commenté el 15 de Mai, 2018 par QMaster

0 votes

Avatar de Michael Yurin

Un guide parfait pour s'aligner css-tricks.com/centering-css-complete-guide

Commenté el 4 de Avril, 2019 par Michael Yurin
Afficher 1 autres commentaires

Réponses

Trop de publicités?

2311voto

kizu avatar
kizu Points 15989

La seule façon (et la meilleure pour tous les navigateurs) que je connaisse est d'utiliser une balise inline-block aide avec height: 100% y vertical-align: middle sur les deux éléments.

Il y a donc une solution : http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum 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 que cela ne vous dérange pas d'utiliser les expressions d'Internet Explorer, vous pouvez utiliser un pseudo-élément et l'ajouter à Internet Explorer à l'aide d'une expression pratique, qui ne s'exécute qu'une fois par élément, ce qui ne pose aucun problème de performance :

La solution avec :before y expression() pour Internet Explorer : http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum 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 éléments proches les uns des autres, vous pouvez les aligner les uns sur les autres. vertical-align: middle vous obtiendrez quelque chose comme ça :

    Two aligned blocks

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

  3. Donc, en ajoutant un inline-block con height: 100% dans un bloc à hauteur fixe alignerait un autre inline-block dans celui-ci ( <img/> dans votre cas) verticalement près de lui.

Répondu el 5 de Septembre, 2011 par kizu (15989 Points )

129 votes

Avatar de ryan

ATTENTION au fait que le : <img src=""/> n'est PAS à l'intérieur du <span></span> qui a été ajouté. C'est à l'extérieur. J'ai failli m'arracher toutes mes mèches de cheveux en ne réalisant pas ça.

Commenté el 12 de Décembre, 2013 par ryan

53 votes

Avatar de juminoz

Il semble que vous deviez également ajouter "white-space : nowrap ;" au cadre ou vous rencontrerez un problème si vous avez un saut de ligne entre votre image et le span d'aide. Il m'a fallu une heure pour comprendre pourquoi cette solution ne fonctionnait pas pour moi.

Commenté el 1 de Janvier, 2014 par juminoz

0 votes

Avatar de kevr

Je ne suis pas sûr que ce soit vrai. J'ai appliqué la même méthodologie à un img sans un .helper et ça marche bien. Il suffit de faire le img y inline-block et il peut s'aligner verticalement correctement.

Commenté el 7 de Juillet, 2021 par kevr
Afficher 1 autres commentaires

583voto

Tahir Yasin avatar
Tahir Yasin Points 3525

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épondu el 30 de Juillet, 2012 par Tahir Yasin (3525 Points )

88 votes

Avatar de jameskind

Si vous souhaitez également aligner horizontalement l'image, ajoutez left:0 ; right : 0 ; à img

Commenté el 2 de Février, 2013 par jameskind

0 votes

Avatar de Godstime Osarobo

Si vous ne connaissez pas la taille de l'image à l'avance, créez un double de l'image : .img1 { position: absolute; top: 0; bottom: 0; margin: auto; } .img2 { visibility: hidden; }

Commenté el 17 de Janvier, 2022 par Godstime Osarobo

569voto

HansWürstchen avatar
HansWürstchen Points 323

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

Voici ma fourchette :

Démonstration : 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;
}
Répondu el 18 de Septembre, 2013 par HansWürstchen (323 Points )

0 votes

Avatar de aliadly

J'ai essayé et cela a parfaitement fonctionné, merci.

Commenté el 28 de Novembre, 2021 par aliadly

156voto

matejkramny avatar
matejkramny Points 1853

A pur Solution 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;
}

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

Les éléments 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
Répondu el 5 de Septembre, 2011 par matejkramny (1853 Points )

102voto

2astalavista avatar
2astalavista Points 7092

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

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}
Répondu el 22 de Novembre, 2013 par 2astalavista (7092 Points )

Questions en vedette

Top Tags

Dans notre réseau

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:

Yandex
X