web-dev-qa-db-fra.com

Image centrale alignée verticale dans la taille fixe div

J'ai une div, qui est 145px x 145px. J'ai un img à l'intérieur de cette plongée. L'IMG pourrait être de n'importe quelle taille (le plus long côté étant 130px). J'aimerais que l'image soit centrée verticalement dans la DIV. Tout ce que j'ai essayé fonctionne dans la plupart des navigateurs, mais pas IE7. J'ai besoin de quelque chose qui fonctionnera dans IE7.

cssimagepositionvertical-alignment
20
David

Vous pouvez remplacer l'image par un arrière-plan sur la DIV comme ceci:

<div style="background:url(myimage.jpg) no-repeat center center"></div>
17
A.Baudouin

voici une solution de navigateur croisée:

<div class="img-container"><img src="picture.png" class="cropped"/></div>


div.img-container {
     width: 390px;
     height: 211px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
 }
img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
51
ndrizza

Pas sûr de IE7 mais pour IE9 et le reste des navigateurs modernes suivant les œuvres suivantes.

    .picturecontainer{
        width:800px;
        height:800px;
        border:solid 1px;
        display:table-cell;
        vertical-align:middle;

    }
    .horizontalcenter{
        display:block;
        margin-left:auto;
        margin-right:auto;
        vertical-align:middle;
    }

Pour l'utiliser

<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>

Cela place des images au centre mort.

5
specialscope

Je ne sais pas ce que vous avez essayé jusqu'à présent, mais le vertical-align La propriété CSS doit fonctionner si les images sont affichées sous forme d'éléments en ligne.

Quelques informations sur Vertical-Align: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Si vous devez prendre en compte toutes les hauteurs d'image, c'est à peu près le seul moyen sans utiliser JavaScript.

Si les images ne sont pas des éléments en ligne et que vous n'aviez qu'à accueillir des images d'une hauteur constante, vous pouvez faire quelque chose comme ceci:

img {
    margin-top: -50px; /* This number should be half the height of your image */
    position: absolute;
        top: 50%;
}

Sinon, la seule façon de penser à accueillir des images de la hauteur variable serait de faire quelque chose de similaire avec votre CSS, mais de définir la marge négative sur la moitié de la hauteur de l'image avec JS.

4
Chris Schmitz

En utilisant le line-height La propriété a résolu le problème pour moi.

Référence: Image verticale alignée dans DIV

HTML:

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>

CSS :

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}
4
Muhammad Omar ElShourbagy

J'ai créé un petit code JQuery pour le faire sans avoir à utiliser des tables méchantes:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
    $('img').each(function () {  
            imgheight = Math.round($(this).height() / 2);
            imgwidth = Math.round($(this).width() / 2);    
            $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
        });
    }   
$(window).load(imagepos);
</script>

Et vous avez également besoin d'un peu de CSS:

div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}
1
Ben