Foros del Web » Creando para Internet » HTML »

Centrar imagen

Estas en el tema de Centrar imagen en el foro de HTML en Foros del Web. Hola a todos: Para temas de presentación, necesito crear un html con una imagen mapeada con enlaces. Esta imagen me hace falta que esté al ...
  #1 (permalink)  
Antiguo 12/01/2013, 14:04
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Centrar imagen

Hola a todos:
Para temas de presentación, necesito crear un html con una imagen mapeada con enlaces. Esta imagen me hace falta que esté al 100% de su tamaño y centrada con respecto al centro de la ventana del navegador, tenga esta ventana el tamaño que tenga y sin scroll... me lo he mirado varias veces y soy muuuy torpe, no lo consigo. Alguien podría echarme una mano?
1000 gracias adelantadas!
  #2 (permalink)  
Antiguo 12/01/2013, 14:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Centrar imagen

puedes aplicarle display:block y margin:auto

o también puedes aplicar text-align al contenedor padre, lo de que no aparezca el scroll pues ya dependerá del tamaño de la imagen, puedes ocultarlo con overflow:hidden pero tendrá sus contras.
  #3 (permalink)  
Antiguo 12/01/2013, 14:19
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Centrar imagen

Gracias por la rapidísima respuesta. Intentaré aplicar lo que me pones, pero ya adelanto que me iria bien un ejemplo de como se coloca ese código... ¿He dicho ya "muy torpe"?
  #4 (permalink)  
Antiguo 12/01/2013, 14:30
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Centrar imagen

ejemplo pues así tal cual lo escribí, no tiene ciencia ni que buscarle... a lo mucho decir que si usas text-align debe ser center.

pero ya que tu pregunta me dice que sabes poco de css te recomiendo pasar al siguiente link -> http://librosweb.es

alli encontraras 3 libros sobre CSS que te seran de gran ayuda para aprender.
  #5 (permalink)  
Antiguo 15/01/2013, 08:04
 
Fecha de Ingreso: enero-2013
Mensajes: 3
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Centrar imagen

Pues si, fue muy facil aplicarlo. Gracias.
De todas formas o no funciona o no me explique bien.
Lo que quiero es que alinee el centro de la imagen con el centro de la ventana de navegación aunque haga la ventana muy pequeña. Es decir, que cuando reduzco la ventana de navegación hacia la izquierda la imagen no pare de alinearse al centro cuando llegue al borde izquierdo, si no que siga alineada al centro de la ventana aunque tenga que salirse por la derecha y por la izquierda.
Un saludo!
  #6 (permalink)  
Antiguo 15/01/2013, 08:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Centrar imagen

Código CSS:
Ver original
  1. img {
  2.   position: absolute;
  3.   top: 50%;
  4.   left: 50%;
  5.   width: 400px;
  6.   height: 200px;
  7.   margin: -100px 0 0 -200px;
  8. }

Donde -100px es la mitad de la altura, y -200px la mitad del ancho.

Aunque no le veo mucho sentido a tapar el contenido por ambos lados.

Etiquetas: Ninguno
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 12:27.