web-dev-qa-db-fra.com

Comment faire une image centre (verticalement et horizontalement) à l'intérieur d'une plus grande div

J'ai une div 200 x 200 px. Je veux placer une image de 50 x 50 px en plein milieu du div.

Comment ceci peut être fait?

Je suis capable de le centrer horizontalement en utilisant text-align: center pour le div. Mais l'alignement vertical est le problème ..

htmlcss
392
Shameem

Personnellement, je le placerais comme image d’arrière-plan dans la div, le CSS pour cela:

#demo {
    background: url(bg_Apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Suppose qu'un div avec id="demo" étant donné que vous spécifiez déjà height et width l'ajout d'un background ne devrait pas être un problème.)

Laissez le navigateur prendre la tension.

317
bochgoch

Travailler dans les anciens navigateurs (IE> = 8)

La position absolue en combinaison avec la marge automatique permet de centrer un élément horizontalement et verticalement. La position de l'élément peut être basée sur une position de l'élément parent en utilisant un positionnement relatif. voir le résultat

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
405
Jonathan Argentiero

une autre méthode consiste à créer une table avec valign, bien sûr. Cela fonctionnerait indépendamment du fait que vous connaissiez ou non la hauteur de la div.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

mais vous devriez toujours vous en tenir à css autant que possible.

104
andyk

Je définirais votre plus grande div avec position:relative; puis pour votre image, procédez comme suit:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Cela ne fonctionne que parce que vous connaissez les dimensions de l'image et du div qui le contient. Cela vous permettra également d'avoir d'autres éléments dans le div contenant ... où les solutions telles que l'utilisation de line-height ne le seront pas.

EDIT: Notez ... vos marges sont négatives de moitié par rapport à la taille de l'image.

77
Tim Knight

Cela fonctionne correctement:

display: block;
margin-left: auto;
margin-right: auto

sinon essayez ceci si ce qui précède ne vous donne que le centrage horizontal:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}
57
Chris

voici une autre méthode pour tout centrer dans n'importe quoi.

Fiddle au travail

HTML: (simple comme toujours)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS: 

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Avantages

La hauteur du conteneur et du contenu est inconnue.

Centrer sans marge négative spécifique, sans régler la hauteur de ligne (pour que cela fonctionne bien avec plusieurs lignes de texte) et sans script, fonctionne également très bien avec les transitions CSS.

38
avrahamcool

Cela arrive un peu tard, mais voici une solution que j'utilise pour aligner verticalement des éléments dans une div parent.

Ceci est utile lorsque vous connaissez la taille du conteneur div, mais pas celle de l'image contenue. (C'est souvent le cas lorsque vous travaillez avec des lightboxes ou des carrousels d'images).

Voici le style que vous devriez essayer:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }
29
Kshitij Chopra

Utilisez Flexbox :

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}
20
Rahul Paru

J'ai trouvé que les réponses de Valamas et de Lepu ci-dessus sont les réponses les plus simples qui traitent d'images de taille inconnue ou de taille connue que vous préférez ne pas coder en dur dans votre code CSS. Je n'ai que quelques petites modifications à apporter: supprimez les styles non pertinents, redimensionnez-le à 200px pour l'adapter à la question, et ajoutez hauteur maximale/largeur maximale pour gérer des images trop volumineuses.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}
20
svachalek

dans le div

style="text-align:center; line-height:200px"
13
Scott Evernden

Alignement vertical est l’un des styles CSS les plus mal utilisés. Cela ne fonctionne pas comme on peut s'y attendre sur des éléments autres que td ou css "display: table-cell".

C'est un très bon post sur le sujet. http://phrogz.net/CSS/vertical-align/index.html

Les méthodes les plus courantes pour obtenir ce que vous cherchez sont les suivantes:

  • rembourrage haut/bas
  • position absolue
  • hauteur de la ligne
12
Alex

En CSS le faire comme:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}
11
Code Breaker

@sleepy Vous pouvez facilement le faire en utilisant les attributs suivants:

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}
<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

Références: W

9
petersonfortes

En règle générale, je vais définir le line-height sur 200px. Fait habituellement le tour.

8
Triptych

J'ai une galerie d'images pour lesquelles je ne connais pas les hauteurs ou largeurs exactes des images, je sais juste qu'elles sont plus petites que la div dans laquelle elles vont être contenues.

En combinant les paramètres line-height sur le conteneur et en utilisant vertical-align: middle sur l'élément image, j'ai enfin réussi à faire fonctionner FF 3.5, Safari 4.0. et IE7.0 en utilisant le balisage HTML et le CSS suivants.

Le balisage HTML

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

Le CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }
8
Diego Tercero

Cela fonctionne pour moi:

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>
6
Alain Beauvois

Une autre façon (pas encore mentionnée ici) est d'utiliser Flexbox .

Il suffit de définir les règles suivantes sur le conteneur div:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

VIOLON

div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div>
  <img src="http://lorempixel.com/50/50/food" alt="" />
</div>

Un bon point de départ pour Flexbox pour visualiser certaines de ses fonctionnalités et obtenir la syntaxe permettant une prise en charge optimale du navigateur est flexyboxes

De plus, le support du navigateur est de nos jours assez bon: caniuse

Pour la compatibilité entre navigateurs pour display: flex et align-items, vous pouvez utiliser les éléments suivants:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
6
Danield

Ceci est une ancienne solution mais les parts de marché des navigateurs ont suffisamment progressé pour vous permettre de vous en sortir sans la partie IE si vous ne craignez pas de dégrader IE7. Cela fonctionne lorsque vous connaissez les dimensions du conteneur externe mais que vous connaissez ou non les dimensions de l'image interne.

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>
5
joshuahedlund

Nous pouvons facilement y parvenir en utilisant flex. pas besoin de background-image.

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>
5
codegeek

facile

img {
    transform: translate(50%,50%);
}
4
ctf0

Vous pouvez centrer une image horizontalement et verticalement avec le code ci-dessous (fonctionne dans IE/FF). Cela mettra le bord supérieur de l'image à exactement 50% de la hauteur du navigateur, et le haut de la marge (en tirant la moitié de la hauteur de l'image vers le haut) le centrera parfaitement.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for Explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for Explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>
3
Thach

J'ai essayé d'obtenir une image centrée verticalement et horizontalement dans une forme de cercle en utilisant hmtl et css.

Après avoir combiné plusieurs points de ce fil, voici ce que j’ai trouvé: jsFiddle

Voici un autre exemple de ceci dans une mise en page à trois colonnes: jsFiddle

CSS: 

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML: 

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
3
jord8on

J'adore sauter sur de vieux vélos!

Voici une mise à jour 2015 de cette réponse . J'ai commencé à utiliser CSS3 transform pour effectuer mon sale travail de positionnement. Cela vous permet de ne pas avoir besoin de faire du HTML supplémentaire, vous n'avez pas à faire de maths (trouver des demi-largeurs de choses), vous pouvez les utiliser sur n'importe quel élément!

Voici un exemple (avec le violon à la fin). Votre HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

Avec CSS d'accompagnement:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

Ce que je fais souvent ces jours-ci, c’est de donner un cours aux choses que je veux centrer et de les réutiliser à chaque fois. Par exemple:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

De cette façon, je pourrai toujours centrer quelque chose dans son conteneur. Vous devez simplement vous assurer que la chose que vous voulez centrer se trouve dans un conteneur qui a un position défini.

Voici un violon

BTW: Cela fonctionne aussi pour le centrage des divisions BIGGER dans les divisions SMALLER.

3
ntgCleaner

Vous pouvez définir la position de l'image est aligner le centre horizontal par cette

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}
2
TVT. Jake
div {
  position: absolute;
  
  border: 3px solid green;
  width: 200px;
  height: 200px;
}

img { 
  position: relative;
  
  border: 3px solid red;
  width: 50px;
  height: 50px;
}

.center {    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<div class="center">
  <img class="center" src="http://placeholders.org/250/000/fff" />
</div>

Connexes: Centrer une image

1
antelove

Utilisez le positionnement. Ce qui suit a fonctionné pour moi:

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}
1
ThomasAFink

merci à tous pour les indices.

J'ai utilisé cette méthode

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}
1
Valamas

Définissez simplement la marge d'image auto comme indiqué ci-dessous.

img{
 margin:auto;
 width:50%;
 height:auto;
}

Vérifiez ces exemple

1
Daniel Nyamasyo
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
1
DanielWaw

Ici, essayez ceci.

.parentdiv {
 height: 400px;
 border: 2px solid #cccccc;
  background: #efefef;
 position: relative;
}
.childcontainer {
 position: absolute;
 left: 50%;
 top: 50%;
}
.childdiv {
 width: 150px;
 height:150px;
 background: lightgreen;
 border-radius: 50%;
 border: 2px solid green;
 margin-top: -50%;
 margin-left: -50%;
}
<div class="parentdiv">
  <div class="childcontainer">
     <div class="childdiv">
     </div>
  </div>
</div>
0
Rahil Lakhani

J'avais ce problème en HTML5 en utilisant CSS3 et mon image était centrée comme telle dans la DIV ... oh oui, je ne peux pas oublier comment j'ai dû ajouter de la hauteur pour afficher l'image ... pendant un moment, je me suis demandé où elle se trouvait. était jusqu'à ce que je l'ai fait. Je ne pense pas que la position et l'affichage sont nécessaires.

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
0
Clarence

https://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">
0
liza

La meilleure façon de centrer une image verticalement et horizontalement consiste à utiliser deux conteneurs et à appliquer les propriétés suivantes:

Le conteneur extérieur

  • devrait avoir display: table;

Le conteneur intérieur

  • devrait avoir display: table-cell;
  • devrait avoir vertical-align: middle;
  • devrait avoir text-align: center;

Une démo

.outer-container {
    display: table;
    width: 80%; /* can be any width */
    height: 120px; /* can be any height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.inner-container img {
    background: #fff;
    padding : 10px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>
0
John Slegers

Cela a fonctionné pour moi. Ajoutez ceci à l'image css:

img
{
   display: block;
   margin: auto;
}
0
shankybaba