Blog and Web

Casi siempre tenemos la necesidad de centrar cierta parte de nuestro contenido y en este tutorial te mostramos como hacerlo de un par de formas:

PRIMERA FORMA: MARGENES NEGATIVOS

1. Vamos a nuestro código HTML y definimos lo que ira centrado de la siguiente forma:

<div id=“contenedor_centrado”><p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p></div>

2. Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor_centrado” de la siguiente forma

<style type=”text/css”>

#contenedor_centrado {position:absolute;top: 50%;left: 50%;height:400px;width:600px;margin-top:-200px; /* El margin top es la mitad del alto de nuestro contenedor, en este ejemplo 400px/2=200px */margin-left:-300px /* El margin left es la mitad del ancho, en este ejemplo 600px/2=300px*/}

</style>

Esta forma es sencilla y rápida de implementar y el hecho de manejar un contenedor también te da la posibilidad de definir otras propiedades como el color de fondo, links y letra.

SEGUNDA FORMA: MARGENES EN AUTO

1. Vamos a nuestro código HTML y definimos lo que ira centrado de la siguiente forma:

<div id=“contenedor_centrado”><p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p></div>

2. Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor_centrado” de la siguiente forma

<style type=”text/css”>

body{text-align:center;}#contenedor{margin: 0px auto;}

</style>

La propiedad “auto” en el contenedor es quien realiza la labor de centrar, pero en IE 6.0 y anteriores no reconoce esta propiedad por lo que hacemos un pequeño hack y en el body definimos un texto alineado al centro, que termina centrando todo el contenido de nuestro contenedor.

Ojala que les sirva