<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
¿Cómo puedo hacer que el inicio de imagen desde el medio de este cuadro? (medio vertical y horizontal)cómo la posición de la imagen en el centro/centro tanto vertical como horizontalmente
Hay varias maneras de hacer esto, y si se tiene que trabajar en todos los navegadores (Internet Explorer 7 + y el resto) que tiene que hacer cosas diferentes para hacer que funcione en algunos de los casos.
Utilice la posición absoluta. Esto solo funciona si conoces el tamaño de la imagen. Aquí lo configuraste en position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.
Ver ejemplo aquí: http://jsfiddle.net/JPch8/
Uso margin: 0 auto;text-align: center; y line-height/font-size. Esto es un poco más complicado, ya que la altura de línea no funciona como debería en IE para elementos de bloque en línea como imágenes. Ahí es donde entra el tamaño de la fuente. Básicamente, establece la altura de línea del contenedor de imágenes al mismo que la altura del contenedor. Esto alineará verticalmente los elementos en línea, pero en IE debe configurar el tamaño de fuente para que funcione.
Ver ejemplo aquí: http://jsfiddle.net/JPch8/2/
En los navegadores modernos que apoyan display: flex que puede hacerlo, simplemente definiendo el div contenedor para display: flex; align-items: center; justify-content: center;
Ver ejemplo aquí: https://jsfiddle.net/ptz9k3th/
Código de Niza.¿Es necesario el asterisco antes de 'font-size' en su código y, de ser así, qué versiones de IE cubre? – Sara44
Utilicé la primera afirmación que funciona perfectamente, simplemente reemplacé la posición absoluta por una relativa para que todas mis imágenes se centraran en su propio div. ¡Gracias! – Elisa
Espero que entienda lo que está tratando de lograr.
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
-1 para usar la etiqueta central. Acabas de matar 2 gatitos :( –
@caspar Kleijne Tienes razón, realmente no sé cómo centrar una imagen en CSS. Sé de text-align: center, pero ¿eso funciona para las imágenes? Gracias –
margin: auto; o margin: 0 auto; si solo desea afectar la alineación horizontal. – Cfreak
"float:left; position:relative "Probablemente no funciona como se esperaba". Los elementos flotantes se consideran absolutos.
Para obtener la imagen centrada verticalmente necesita una altura en el div, y necesita altura en sus padres. (Centrar verticalmente es una especie de dolor). Mi ejemplo a continuación funcionará si esos son sus únicos elementos, pero tenga en cuenta que height: 100% en los contenedores probablemente afectará el resto de su diseño.
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
poner la imagen en un <div> con text-align:center; sin especificar el tamaño de la caja
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
, alternativamente, se puede especificar width y la height de la caja <div> con el fin de centrar la imagen (en realidad el caja div).
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
Si no necesita la imagen en línea, puede considerar agregarla al fondo del div con la posición de fondo: centro y fondo-repetir: no-repetir. –