Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: NetRunner en 29 de Junio de 2012, 17:15:33 pm
-
¡Hola!
Tengo una imagen que quiero centrar horizontalmente y verticalmente. Pero todos los códigos que he encontrado me fallan.
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* height/2 = 500px / 2 */
margin-left: -250px; /* width/2 = 500px / 2 */
¿Alguien podría ayudarme, por favor?
-
Para centrar la iamgen horizontalmente yo usaría text-align..
.imagen-centrada {
text-align: center;
}
y para usarlo..
<div class="imagen-centrada"><img src="ruta"></div>
y para centrar verticalmente, si solamente es una imagen o una linea de texto, usaría line-height y le pondría una altura que sea la misma que la del div.
-
Sinceramente no se si con CSS se podria centrar siendo que jamas lo eh intentado pero yo te recomiendo que uses html para ello...
<table width="100%" height="100%">
<tbody>
<tr>
<td align="center" valign="middle">
<img src="path/to/image" alt="">
</td>
</tr>
</tbody>
</table>
-
¡Hola!
Tengo una imagen que quiero centrar horizontalmente y verticalmente. Pero todos los códigos que he encontrado me fallan.
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* height/2 = 500px / 2 */
margin-left: -250px; /* width/2 = 500px / 2 */
¿Alguien podría ayudarme, por favor?
Para qué escribir cosas que ya están escritas.
Aquí te dejo un enlace dónde te explica cómo centrar la imagen. Saludos. Espero que sea de gran ayuda.
http://www.scourdesign.com/articulos/tutoriales/css/css10.php (http://www.scourdesign.com/articulos/tutoriales/css/css10.php)