Problema centrado de imagens
4 seguidores
Hola tengo un problema con html y css.
Quiero poner dos imagenes, una debajo de la otra, la de arriba es más ancha que la imagen de abajo.
El problema que tengo es que no sé como hacer para que las dos imágenes esten centradas en el navegador si tener que estar constantemente poniendo el margin en px. Hay alguna forma de indicar que la imagen se ponga justo en el centro de la pantalla sin tener que estar haciendolo conlos pixeles?
dibusmaker
Una añadidura: Exacto, una de esas soluciones, y el div padre de esa zona de la página, o la página entera, o la temática o lo que sea, manda. Si todas las imágenes de esa página van ir centradas así, o todas las de un área de la página, ese div padre que te dicen, está ya definido en la hoja css..
O sea,
En la hoja de estilos, la hoja css, ( styles.css o como se llame el archivo) si no quieres que no todo elemento se te te centre, sólo las imágenes, puedes poner para que sólo afecte a las imágenes (y dependerá de lo que que quieras, puedes convertir la img en block o no )
.containerCentrado img {
.
.
o, si quieres discriminar más,
.containerCentrado img [alt="foto-de-producto"] {
.
.
<div class="containerCentrado">
<img src="blahblah" alt="foto-de-producto" />
...
...
Lo cual sólo afectaría a, por ejemplo, las imágenes de un catálogo, pero no a las de los botones, etc.
u otro atributo que el html de esas imágenes ya lleven de hecho y no tengas que ponerlo ex profeso.
Lo del atributo lo soportan todos los modernos ,ya, incluyendo Safari 3.1 y Opera 9.6. Y siempre puedes hacer cositas en el css para los que no las soporten, como siempre. El responsive es todo a base de eso, al fin y al cabo...
jnacher
.containerCentrado {
height: 300px;
left: 50%;
position: absolute;
top: 50%;
width: 300px;
}
Yo lo que haría sería centrar un div padre, puedes darle % o px a la imagen, despues dentro del div pondría las imagenes.
Un saludo
salusgibson
Muchas gracias a los dos, genial las páginas les hecharé un vistazo y os cometo.
raul_marin Profesor Plus
Hola @salusgibson,
pues suscribo lo que te dice @montaycabe en CSS todo se puede hacer de varias formas, sumando a esto el tema también de los CSS hacks (aunque sean apaños, :))... en fin, que nunca hay tiempo para el aburrimiento en CSS...
Si te interesa avanzar con el CSS además del fantástico recurso de Librosweb puedes investigar y buscar recursos más específicos en internet, del estilo por ejemplo de Css-tricks
Un saludo!
NMGHW
Usuario desconocido
Hay muchos recursos por ahi para aprender css, yo estuve siguiendo este entre otros, se queda en el css2 pero los conceptos son los mismos:
http://librosweb.es/libro/css_avanzado/
Por otra parte, en css todo se suele poder hacer de varias formas, como en este caso, y todo puede fallar por varias cosas. Todo es muy flexible, por ejemplo los div son block por defecto y los span inline, pero todo se puede cambiar con los estilos y ponerle un display:block al span y viceversa con el div.
salusgibson
Gracias, ese es el problema que no tengo muy claro que aplicar a cada cosa, seguiré tu recomendación de poner inline-block a las imagenes y el text center al div. Sabeis donde explican bien estas cosas? Creo que el problema del flujo ocurre porque no se deja claro que ocurre cuando se hace algo con una imagen o cuando se aplica al div o section.
Usuario desconocido
Prueba poniendoles margin: auto.
O tambien un display:inline-block a las imagenes y un text-align:center al div que las contiene
raul_marin Profesor Plus
Hola @salusgibson
pues casi mejor que dejarte por aquí alternativas :) échale un vistazo a este completo artículo:
Centrando al centro con Css: (casi) Todas las formas conocidas para hacerlo (25)
Ánimo!
NMGHW