web-dev-qa-db-fra.com

Comment centrer l'image dans un div horizontalement et verticalement

J'ai le code de balisage suivant sur ma page:

<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 ça ne semble pas comme je m'y attendais, ça 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?

htmlcssimage
15
CeccoCQ

Voici un tutorial pour savoir comment centrer les images verticalement et horizontalement dans un 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>

12
AlphaMale

Pour l'alignement vertical, j'inclurais des CSS pour le positionner à partir des 50% supérieurs, puis le déplacer de la moitié de la hauteur en pixels de l'image.

Horizontal, je voudrais utiliser une marge, comme suggéré.

Donc, si votre image était 100x100px, vous vous retrouveriez avec.

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

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

Il y a deux aspects que vous devez aborder. 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. La largeur et la hauteur de DIV doivent être définies sur la taille de l’image (sinon, cela ne fonctionnera pas). Pour obtenir un alignement vertical central, vous devez ajouter du code javascript au code HTML. En effet, la taille de 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: $ (fenêtre) .ready (fonction () {/ * événement d'écoute de fenêtre prête - 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"}); 
    }

La 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 complète à partir de la page d’accueil de notre société à l’URL suivante: 

http://brumenlab.com

0
Boro Brumen

Cette solution s’applique aux images de toutes tailles Dans celle-ci, le rapport d’image est également conservé.

.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 définir la taille de

.client_logo

selon vos besoins

0
Chintan Mathukiya