vertical alinea la imagen del centro en el tamaño fijo div

Question

Tengo un div que es 145px X 145px. Tengo un img dentro de esta inmersión. El img puede ser de cualquier tamaño (el lado más largo es 130px). Me gustaría que la imagen se centre verticalmente en el div. Todo lo que he probado funciona en la mayoría de los navegadores, pero no en IE7. Necesito algo que funcione en IE7.

Answer 1

Puede sustituir la imagen por un fondo en el div como esto:

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

Answer 2

No estoy seguro de lo que ha intentado hasta ahora, pero la propiedad vertical-alinear CSS debería funcionar si las imágenes se muestran como elementos en línea.

algo de información sobre vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Si usted tiene que dar cuenta de todas las alturas de imagen, que es prácticamente la única manera sin el uso de JavaScript.

Si las imágenes no están en línea los elementos y sólo tuvo que adaptarse a las imágenes de una altura constante, usted podría hacer algo como esto:

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

lo contrario, la única manera que se me ocurre para acomodar imágenes de altura variable sería hacer algo similar con su CSS, pero establezca el margen negativo a la mitad de la altura de la imagen con JS.

Answer 3

No estoy seguro sobre IE7 pero para IE9 y resto de los navegadores modernos siguientes obras.

.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; 
    } 

para usarlo

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

Esto coloca las imágenes en el punto muerto.

Answer 4

he creado un poco de código jQuery para hacer esto sin tener que utilizar tablas desagradables:

<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> 

Y también necesita un poco de css:

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

Answer 5

aquí es una solución multi-navegador :

<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; 
} 

Answer 6

El uso de la propiedad line-height resolvió el problema para mí.

Referencia: vertical-align image in 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; 
}