Comment centrer l'image dans un div horizontalement et verticalement

J'ai le code de balisage suivant dans ma page:Comment centrer l'image dans un div horizontalement et verticalement

<div id="root_img" style="width:100%;height:100%"> 
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;"> 
     <a id="a_img_id" href="./css/imgs/mancante.jpg"> 
      <img id="img_id" src="./css/imgs/mancante.jpg" /> 
     </a> 
    </div> 
</div>

Et il ne semble pas que je m'y attendais, il ressemble à ça:

enter image description here

Mais je voulais obtenir ce résultat:

enter image description here

Comment puis-je centrer cette image horizontalement et verticalement?

Source

2012-04-24 CeccoCQ

Pourquoi utilisez-vous 4 balises au lieu de 2? devrait fonctionner. – Vivien

Je vois l'image au bas de div, X raprésent quelque chose ou je dois lui donner des valeurs? – CeccoCQ

X pourrait être quelque chose de bon pour vous: "5%", "10px, 0" ... Aussi vous pouvez mettre l'image du bas avec "background-image" et "background-position" sur la div principale div – Vivien

Voici un tutorial pour savoir comment centrer les images verticalement et horizontalement dans une div.

Voici ce que vous recherchez:

.wraptocenter { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #999; 
 
} 
 
.wraptocenter * { 
 
    vertical-align: middle; 
 
}

<div class="wraptocenter"> 
 
    <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> 
 
</div>

Source

2012-04-24 10:34:40 AlphaMale

« wraptocenter » (en exemple) est la classe de mon root_img div? – CeccoCQ

oui, vous avez juste besoin de le formater en fonction de votre html – AlphaMale

Incompatibilité Cross Browser ... :( –

Pour l'alignement vertical, j'inclurais du CSS pour le positionner à partir du top 50% puis le déplacer jusqu'à la moitié du nombre de pixels de la hauteur de l'image.

Horizontal, j'utiliserais une marge, comme suggéré. Donc, si votre image était 100x100px vous finiriez avec.

<img id="my_image" src="example.jpg"> 

<style> 
#my_image{ 
position: absolute; 
top: 50%; 
margin: -50px auto 0; 
} 
</style>

Source

2012-04-24 10:27:03

J'ai essayé, mais j'ai l'image à bas de div. – CeccoCQ

Oui, désolé, je n'ai pas lu votre balisage. Il suffit d'appliquer à la place '' car c'est l'emballage de votre '' –

Les mêmes résultats ... :( – CeccoCQ

-1

Essayez quelque chose comme ceci:

<div style="display:table-cell; vertical-align:middle"> 
"your content" 
</div>

Source

2012-04-24 10:27:27

image et Aligne le texte différemment. – Murtaza

-1

utilisant margin-top

exemple css

#id_immagine{ 
    margin:0 auto; 
    }

Source

2012-04-24 10:31:32 srini

Il y a deux aspects dont vous avez besoin pour répondre. Le premier aspect est l'alignement horizontal. Ceci est facilement réalisable avec la marge: auto appliquée sur l'élément div entourant l'image elle-même. DIV doit avoir la largeur et la hauteur définies à la taille de l'image (sinon cela ne fonctionnera pas). Pour obtenir l'alignement vertical du centre, vous devez ajouter du javascript au HTML. Cela est dû au fait que la taille de la hauteur HTML n'est pas connue au démarrage de la page et pourrait changer ultérieurement. La meilleure solution consiste à utiliser jQuery et à écrire le script suivant: $ (window).ready (function() {/ * écoute l'événement window ready - déclenché après le chargement de la page */ repositionCenteredImage(); });

$(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
     repositionCenteredImage(); 
    }); 

    function repositionCenteredImage() { /* reposition our image to the center of the window*/ 
     pageHeight = $(window).height(); /*get current page height*/ 
     /* 
     * calculate top and bottom margin based on the page height 
     * and image height which is 300px in my case. 
     * We use half of it on both sides. 
     * Margin for the horizontal alignment is left untouched since it is working out of the box. 
     */ 
     $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

page HTML qui montre l'image ressemble à ceci:

<body> 
     <div id="pageContainer"> 
      <div id="image container"> 
       <img src="brumenlabLogo.png" id="logoImage"/> 
      </div> 
     </div> 
    </body>

CSS attaché aux éléments ressemble à ceci:

#html, body { 
    margin: 0; 
    padding: 0; 
    background-color: #000; 
} 

#pageContainer { /*css for the whole page*/ 
    margin: auto auto; /*center the whole page*/ 
    width: 300px; 
    height: 300px; 
} 

#logoImage { /*css for the logo image*/ 
    width: 300px; 
    height: 300px; 
}

Vous pouvez télécharger la solution entière de notre société page d'accueil à l'adresse suivante:

http://brumenlab.com

Source

2015-04-10 13:58:45

Cette solution est pour toutes les images de taille Dans cette ration de l'image est aussi de maintenir.

.client_logo{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#f4f4f4; 
 
} 
 
.display-table{ 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.display-cell{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.logo-img{ 
 
    width: auto !important; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 

 
}

<div class="client_logo"> 
 
    <div class="display-table"> 
 
     <div class="display-cell"> 
 
     <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> 
 
     </div> 
 
    </div> 
 
</div>

Vous pouvez régler la taille de

.client_logo

à votre exigence accourding

Source

2016-10-07 07:31:45

Comment centrer l'image dans un div horizontalement et verticalement

Répondre

Questions connexes