Verticalement et Horizontalement Centre de l'Image à l'intérieur d'un Div, si vous ne connaissez pas l'Image de la Taille?

Si le réglage de l'image en tant qu'image d'arrière-plan et le centrage de cette façon n'est pas une option, le jQuery pour s'adapter la réponse que vous lié pour les images statiques:

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image's width
  var hTall = ($(this).height())/2; //half the image's height, etc.

  //attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';
  hTall = '-' + hTall + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
    "margin-top" : hTall
  });
});

en supposant une classe CSS définie comme

.variable.js-fix {
  position:absolute;
  top:50%;
  left:50%;
}

avec le fixe-largeur de la div ayant une hauteur et position:relative déclaré.

[important js edit: activé.style()' pour '.css()']

OriginalL'auteur D_N

Crossbrowser solution

<style>
  .border {border: 1px solid black;} 
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
  <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
    <div class="border" style="width: 400px; #position: relative; #top: -50%">
      <img src="smurf.jpg" alt="" />
  </div>
</div>

Solution originale pour vertical div positionnement

OriginalL'auteur edtsech

Si vous ne connaissez pas la taille d'une image, mais vous avez téléchargé les photos à côté de la taille du conteneur (peut-être plus grand ou plus petit des images), ce poste peut être utile. Quelque chose qui fonctionne pour moi est donc le code suivant:

<a class="linkPic" href="#">
    <img src="images/img1.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img2.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img3.jpg" alt=""/>
</a>

Et dans le .le fichier css, vous avez les règles suivantes:

a.linkPic{
    position:relative;
    display: block;
    width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
    position:absolute;
}

Vous pouvez remarquer que vous avez une image de balise à l'intérieur d'un.linkPic, de sorte que vous devez d'abord définir comme "position:relative" pour contenir les "img" absolue de l'élément. Le truc pour le centre de l'image sans problèmes est un peu de jQuery. Suivez les commentaires pour comprendre ce qui se passe sur (certaines lignes ont été prises à partir de l'Vladimir Maryasov post de cette page):

$("a.linkPic img").each(function() {
    //Get container size
    var wrapW = $("a.linkPic").width();
    var wrapH = $("a.linkPic").height();

    //Get image sizes
    var imgW = $(this).width();
    var imgH = $(this).height();

    //Compare if image is bigger than container
    //If image is bigger, we have to adjust positions
    //and if dont, we have to center it inside the container
    if (imgW > wrapW && imgH > wrapH) 
    {
        //Centrar por medio de cálculos
        var moveX = (imgW - wrapW)/2;
        var moveY = (imgH - wrapH)/2;

        //attach negative and pixel for CSS rule
        var hWide = '-' + moveX + 'px';
        var hTall = '-' + moveY + 'px';

        $(this).addClass("imgCenterInDiv").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    } else {
        $(this).addClass("imgCenterInDiv").css({
            "left" : 0,
            "right" : 0,
            "top" : 0,
            "bottom" : 0,
            "margin" : "auto",
        });
    }//if
});

Après cela, toutes les photos à l'intérieur dans un.linkPic conteneurs seront placés parfaitement centré. J'Espère que ce post peut être utile pour quelqu'un!

OriginalL'auteur Ricardo Rodriguez

Vous pouvez également aligner cette façon. Au moins c'est la façon dont je l'ai fait et cela a fonctionné pour moi. Peut-être pas le meilleur moyen de le faire. J'ai eu un tas de différentes taille des logos à l'intérieur de taille fixe divs.

D'abord obtenir les dimensions de l'image. Puis, en fonction de la hauteur de votre div, vous pouvez comprendre quelle est la marge supérieure devrait être. Ce sera à la verticale du centre. Il suffit de changer $IMG_URL et $DIVHEIGHT valeurs.

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

Par exemple.

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>

OriginalL'auteur vitalyp

Utilisation hauteur:100% pour la balise html, la balise body, d'un conteneur et d'un espace réservé vide de l'élément de plus display:inline-block; vertical-align: middle pour le contenu et l'espace réservé à la verticale du centre de contenu qui a un indéfini de la hauteur sur tous les navigateurs. L'espace réservé élément est donné à 100% de la hauteur pour soutenir la zone de ligne, de sorte que vertical-align: middle a l'effet désiré. Utiliser une largeur fixe conteneur pour envelopper les images.

Utiliser display:inline pour la div du contenu et du texte-alignez le centre de la div conteneur à faire horizontale de centrage pour le contenu qui a un indéfini largeur dans les navigateurs.

Combiner les deux techniques pour créer une image centrée galerie:

<!doctype html>
<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}
img { margin-left: 20px; margin-top: 10px; }
.container { text-align:center; }
/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }
.placeholder, .wrapper, .content { vertical-align: middle; }
/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }
.fixed { width: 900px; }
.content { display:inline; }
@media,
{
.wrapper { display:inline; }
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<div class="fixed">
<img src="http://microsoft.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://microsoft.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
</div>
</div>
</div>
<span class="placeholder"></span>
</div>
</body>
</html>

OriginalL'auteur Paul Sweatte

Centre de l'image horizontalement et verticalement

DÉMO:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/

 .section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

OriginalL'auteur Dhwani sanghvi