web-dev-qa-db-fra.com

Aligner l'image au centre et au milieu de la division

J'ai div suivante

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

Comment aligner l'image de manière à ce qu'elle soit située au centre et au centre de la div?

htmlcss
250
Dro1n2

JSFiddle

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
<div id="over" style="position:absolute; width:100%; height:100%">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

364
Gurpreet Singh
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
145
John K.

Il me semble que vous souhaitiez également que cette image soit centrée verticalement dans le conteneur. (Je n'ai vu aucune réponse à cette condition)

Violon de travail:

  1. Solution pure CSS
  2. Ne pas interrompre le flux de documents (pas de flotteurs ni de positionnement absolu)
  3. Compatibilité entre navigateurs (même IE6)
  4. Complètement réactif.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Note: cette solution est utile pour aligner n'importe quel élément dans n'importe quel élément . Pour IE7, lors de l'application de la classe .Centered sur des éléments de bloc, vous devrez utiliser une autre astuce pour que inline-block fonctionne. (parce que IE6/IE7 ne joue pas bien avec des éléments de bloc inline-block)

86
avrahamcool

Cela peut également être fait en utilisant la disposition Flexbox:

TAILLE STATIQUE

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}
<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

TAILLE DYNAMIQUE

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}
<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

J'ai trouvé l'exemple dans cet article article , qui explique très bien l'utilisation de la mise en page.

85
aerdman
img.centered {
   display: block;
   margin: auto auto;
}
57
Nitin
#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
26
dhir

Vous pouvez le faire facilement en utilisant la propriété display: flex css 

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
22
tanveer ahmad dar

Fondamentalement, si vous définissez les marges gauche et droite sur auto, l’alignement de l’image est centré.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
10
Garconis

Il me restait quelques problèmes avec une autre solution présentée ici. Enfin cela a fonctionné le mieux pour moi:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

cSS3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

Vous pouvez en savoir plus sur cette approche sur cette page .

9
pawel7318

Ce serait une approche plus simple

#over > img{
    display: block;
    margin:0 auto; 
}
8
Sujay sreedhar

régler img sur display: inline-block en réglant le div supérieur sur text-align: center fera également l'affaire

EDIT: pour ceux qui jouent avec display: inline-block >>> n'oubliez pas que, par exemple. deux divs comme

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

vraiment pas d'espaces entre eux (comme on le voit ici).

Simplement fondamental pour éviter ces écarts (inline block inhérents). Ces écarts peuvent être vus entre tous les deux mots que j'écris en ce moment! :-) Alors .. espérons que cela aide certains d'entre vous.

6
sasha

SIMPLE. 2018. FlexBox. Pour vérifier la prise en charge du navigateur - Puis-je utiliser

Solution minimale:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}


Pour obtenir le support le plus large possible du navigateur: 

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}
6
Nadav

Fichier CSS

.over {
    display : block;
    margin : 0px auto;
5
Sabarish R

J'ai essayé plusieurs approches, mais seule celle-ci fonctionne pour plusieurs éléments en ligne dans un conteneur div. Voici le code pour tout aligner dans div au milieu.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Voici un exemple de code: https://jsfiddle.net/yogendrasinh/2vq0c68m/

5
Yogee

Essayez ce code minimal:

<div class="outer">
    <img src="image.png"/>
</div>

Et CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}
3
luchopintado

HTML: 

<div id="over">
    <img src="img.png">
</div>

CSS: 

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}
2
Lahori

cela a fait le tour pour moi. 

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Remarque: dans ce cas, aucune classe css n'est associée à' Image de marque '

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}
2
julian9876

Pour le centre horizontalement Il suffit de mettre

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Une autre méthode:

#over img {
    display: inline-block;
    text-align: center;
}

Pour centrer verticalement Il suffit de mettre:

   #over img {

           vertical-align: middle;
        }
2
Sanjib Debnath

de nombreuses réponses suggèrent d'utiliser margin:0 auto mais cela ne fonctionne que lorsque l'élément que vous essayez de centrer ne flotte pas à gauche ou à droite, c'est-à-dire que l'attribut float css n'est pas défini. Pour ce faire, appliquez l'attribut display à table-cell, puis appliquez les marges de gauche et de droite à auto afin que votre style ressemble à style="display:table-cell;margin:0 auto;".

2
vikas devde
    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>
2
betty.88

Cela a fonctionné pour moi:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}
2
Sileria

Eh bien, nous sommes en 2016 ... pourquoi ne pas utiliser la flexbox? Elle est également réactive. Prendre plaisir.

#over{
display:flex;
align-items:center;
justify-content:center;
}
<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

2
GabMic

Cela a fonctionné pour moi lorsque vous devez centrer l'alignement de l'image et que votre div parent à l'image couvre tout l'écran. hauteur: 100% et largeur: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
1
Akshay Bande

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

Avec zoom au centre de l'image (l'image remplit le div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Sans zoom au centre de l'image (l'image ne pas remplit le div):

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

La réponse marquée pour cela n'alignera pas verticalement l'image. Une solution appropriée pour les navigateurs modernes est la flexbox. Un conteneur flexible peut être configuré pour aligner ses éléments horizontalement et verticalement.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>
1
WDuffy

Cela devrait marcher.

IMPORTANT POUR LE TEST: Pour exécuter un extrait de code, cliquez sur le bouton gauche Exécuter un extrait de code , puis lien de droite Page entière 

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}
<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

0
Intacto

Utilisez bootstraps align-items et justify-content. Voir exemple ci-dessous:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>
0
Mwizak

La réponse de Daaawx fonctionne, mais je pense que ce serait plus propre si nous éliminions le css en ligne.

body {
        margin: 0;
}

#over img {
        margin-left: auto;
        margin-right: auto;
        display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="example" id="over">
        <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
0
LizardKG

Un moyen simple serait de créer des styles distincts pour la div et l'image, puis de les positionner indépendamment. Dites si je veux régler la position de mon image à 50%, alors je voudrais un code qui ressemble à ce qui suit ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}
<div id="over">
 <img src="img.png" id="img">
</div>

0
KSJ10

J'ajoute quelques propriétés supplémentaires au CSS. Ainsi:

div#over {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-align-items: center;
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex;
}
0
Kramer

Vous pouvez jeter un oeil sur cette solution: 

Centrer horizontalement et verticalement une image dans une boîte

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
0
fpauer
#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Modifiez la valeur de la hauteur en fonction de vos besoins.

0
Terry Lin