Blogger CSS

Centrar contenido con CSS

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>

 

  1. 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>

 

    1. 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 🙂

Deja un comentario

11 Comentarios

  • quiero centrar contenidos y no pasa nada yo siempre centraba con este codigo:

    texto o lo que fuese

    mi blog es de wordpress.

    gracias!

  • Hola!, Porfavor me pongo en contacto con vosotros porque siempre uso vuestras plantillas pero ahora desde hacce unos meses no me deja descargar ninguna!, me sale un error que tengo que actualizar la pagina o no se que, nunca he tenido problemas y ahora no se que pasa. concretamente la que quiero descargarme ahora es Sweet-Girl. Porfavor poneros en contacto conmigo aver como la puedo conseguir. muchas gracias, y un saludo.

  • gracias por pasar de mi y no contestarme… ya lo he solucionado por otro lado!, soys muy amables.

  • Llevava mucho rato buscando una solución para poder centrar el contenido de los div’s de mi página a través de CSS y porfin lo he logrado! buenisimo el aporte, muchas gracias!! os lo habeis currado! Asi da gusto aprender del Web!+
    Un saludo

  • Hola Francisco. Espero que todo ande bien. Te escribo para preguntarte si es posible que me ayudes a alinear un nuevo blog que estoy creando con base blogger.

    Mi problema consiste en que tengo conocimientos muy básicos de html y hojas de estilo CSS (Me defiendo bastante bien);
    No logro alinear el contenido completo de mi blog sin desproporcionar lo que he logrado hasta ahora hacia la izquierda. Sería como moverlo todo hacia la izquierda respetando el contenido.

    ¿Podrías ayudarme en eso?
    Gracias de antemano.