Cómo centrar la imagen en un div horizontal y verticalmente

Tengo el siguiente código de marcado en mi página:Cómo centrar la imagen en un div horizontal y verticalmente

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

Y no aparece como esperaba, parece que:

enter image description here

Pero quería obtener este resultado:

enter image description here

¿Cómo puedo centrar esta imagen horizontal y verticalmente?

Fuente

2012-04-24 CeccoCQ

¿Por qué utiliza 4 etiquetas en lugar de 2? debería funcionar. – Vivien

Veo la imagen en la parte inferior de div, X algo en representación o tengo que establecer algunos valores? – CeccoCQ

X podría ser algo bueno para usted: "5%", "10px, 0" ... También podría poner la imagen inferior con "background-image" y "background-position" en el div principal – Vivien

Aquí está una tutorial de cómo centrar las imágenes verticalmente y horizontalmente en un div.

Esto es lo que están buscando:

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

Fuente

2012-04-24 10:34:40 AlphaMale

"wraptocenter" (en ejemplo) es la clase de mi div root_img? – CeccoCQ

sí, solo tiene que formatearlo de acuerdo con su html. – AlphaMale

Incompatibilidad con el navegador cruzado ... :( –

Para la alineación vertical, incluiría un poco de CSS para posicionarlo desde el 50% superior y luego moverlo hasta la mitad de la altura de píxeles de la imagen.

Horizontal, utilizaría un margen, como se sugiere.

Así que si tu imagen era 100x100px terminarías con.

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

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

Fuente

2012-04-24 10:27:03

Lo he intentado, pero tengo la imagen en parte inferior de div. – CeccoCQ

Sí, lo siento, no leí su marcado. Sólo se aplican a los '' lugar ya que es envolver sus '' –

mismos resultados ... :( – CeccoCQ

-1

intentar algo como esto:

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

Fuente

2012-04-24 10:27:27

imagen y el texto se alinea de manera diferente. – Murtaza

-1

usando margin-top

ejemplo css

#id_immagine{ 
    margin:0 auto; 
    }

Fuente

2012-04-24 10:31:32 srini

Hay dos aspectos que hay que abordar. El primer aspecto es la alineación horizontal. Esto es fácilmente alcanzable con el margen: aplicado automáticamente en el elemento div que rodea la imagen en sí. DIV debe tener el ancho y el alto establecidos en el tamaño de la imagen (de lo contrario, esto no funcionará). Para lograr la alineación central vertical, debe agregar algo de javascript al HTML. Esto se debe a que el tamaño de altura de HTML no se conoce en el inicio de la página y puede cambiar más adelante. La mejor solución es usar jQuery y escribir el siguiente script: $ (ventana).listo (función() {/ * escuche el evento de ventana lista - se dispara después de que la página se está cargando */ 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"}); 
    }

página

HTML que está mostrando la imagen se ve así:

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

CSS unido a los elementos se parece a esto:

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

Puede descargar toda la solución de nuestra compañía página de inicio en la siguiente url:

http://brumenlab.com

Fuente

2015-04-10 13:58:45

Esta solución es para todas las imágenes de tamaño En este la ración de la imagen también se mantendrá.

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

Puede ajustar el tamaño de

.client_logo

accourding su requisito

Fuente

2016-10-07 07:31:45

Cómo centrar la imagen en un div horizontal y verticalmente

Respuesta

Cuestiones relacionadas