Como centrar una imagen o bloque (div) usando CSS. Como centrar un texto o imagen en HTML.

Para centrar una imagen, texto o un bloque(div) en un página web, la forma mas fácil es usando CSS.

En este ejemplo vamos a definir un bloque cuadrado de 400px. Usamos width and height para definir la altura y el ancho.

Es necesario definir el ancho del bloque para así poder centrar el mismo con CSS, si no se define el ancho no se va a centrar correctamente.

Por último, definimos las margenes izquierda y derecha del bloque(div), estas calcularan el ancho de la pantalla y automaticamente calcularan el centro, así.

[infobox style=»alert-info»] .bloqueCuadrado { width: 400px; height: 400px; margin-left:auto; margin-right:auto;} [/infobox]

[editr item=»post-788″ html=»centrarbloque.html» css=»centrarbloque.css» scrollbar=»dark» theme=»monokai» ]

Add Comment