Foros del Web » Creando para Internet » CSS »

¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Estas en el tema de ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ? en el foro de CSS en Foros del Web. Hola! Estoy intentando centrar una imagen (tanto horizontal como verticalmente) que se encuentra dentro de un DIV y no acabo de conseguirlo. La única manera ...
  #1 (permalink)  
Antiguo 02/02/2011, 12:46
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Hola!

Estoy intentando centrar una imagen (tanto horizontal como verticalmente) que se encuentra dentro de un DIV y no acabo de conseguirlo. La única manera que he podido es poniendola como fondo del DIV pero no se.., me gustaría más hacerlo "normal"..

¿ ALguien sabe alguna forma sencilla de hacerlo ?

Gracias de antemano!!
  #2 (permalink)  
Antiguo 02/02/2011, 19:52
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

La manera más simple usando CSS para centrar horizontalmente sería usar en el div text:align:center.
Suponiendo que el div tenga una altura fija mayor que el tamaño de la imagen puedes usar el siguiente CSS para centrar la imagen tanto horizontal como verticalmente suponiendo que tuviese 400x400px:
{
position:absolute; /*El div debe tener la propiedad position distinta de static*/
top: 50%;
left:50%;
margin-top: -200px; /* El valor 200 es ficticio, debes cambiarlo en cada caso por la mitad de la altura de tu imagen*/
margin-let: -200px;/* El 200 deberás sustituirlo por la mitad del ancho de la imagen */
}
Esto mismo sirve para centrar cualquier elemento dentro de otro a condición de saber el ancho y alto del que va dentro.
  #3 (permalink)  
Antiguo 03/02/2011, 03:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Hola:

Cita:
Iniciado por sanxuan Ver Mensaje
La manera más simple usando CSS para centrar horizontalmente sería usar en el div text:align:center.
La mejor manera de centrar horizontalmente es margin:0 auto, text-align sirve para centrar texto nada más, salvo en versiones antiguas de IE.

Mírate este ejemplo de Mikmoro centrado vertical 2, en el ejemplo centra texto pero podrás adaptarlo para centrar la imagen.

Saludos.

  #4 (permalink)  
Antiguo 03/02/2011, 03:29
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Sanxuan funciona perfecto!, jomaruro le daré un vistazo..

Pero ahora me surge una duda, me interesaría realizar una galeria de imagenes y necesitaría flotar a la izq para que se añadan una al lado de la otra, pero con position absolute no puedo ( o no se)..

¿Sabrias como se hace?

Te dejo el código que utilizo:
http://www.bpaste.net/show/13443/

Gracias!!
  #5 (permalink)  
Antiguo 03/02/2011, 06:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Hola:

Empieza por cambiar la posicion absoluta por la relativa. Para que entiendas mejor como funciona el posicionamiento en CSS empieza por echarle un vistazo a la guía de migración que Mikmoro aporto en el foro de CSS.

Te servirá ahora y en un futuro porque la posición absoluta da más problemas que ventajas y solo debe utilizarse en unos pocos casos.

Saludos.

  #6 (permalink)  
Antiguo 03/02/2011, 08:47
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

ok lo tendré en cuenta, le echaré un vistazo al manual también..
  #7 (permalink)  
Antiguo 03/02/2011, 12:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Debo corregirte Jomauro.
Una imagen es en principio un elemento en línea, como el texto, y para centrarla dentro de un div, basta con declarar text-align:center en ese div (no en la imagen).
Para centrar el contenedor div en la página o en otro contenedor, usa margin:0 auto, ya que es un elemento de bloque.
  #8 (permalink)  
Antiguo 04/02/2011, 04:13
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿ Como centrar horizontal y verticalmente una imagen dentro de un div ?

Hola:

Cita:
Iniciado por sanxuan Ver Mensaje
Debo corregirte Jomauro.
Una imagen es en principio un elemento en línea, como el texto, y para centrarla dentro de un div, basta con declarar text-align:center en ese div (no en la imagen).
Para centrar el contenedor div en la página o en otro contenedor, usa margin:0 auto, ya que es un elemento de bloque.
sanxuan, tienes razón. Debo reconocer mi error no me di cuenta de que era una imagen y no un div.

davidj, prueba esto:

Código CSS:
Ver original
  1. #recuadro{
  2.     position:absolute;
  3.     height: 280px;
  4.     width: 480px;
  5.     border: 1px solid #999999;
  6.     display: table;
  7. }
  8.        
  9. #foto {
  10.     position:relative;
  11.     display: table-cell;
  12.     vertical-align:middle;
  13.     text-align:center;
  14. }

Saludos.


Etiquetas: horizontal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:28.