English Português

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:

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

  3. 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:

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

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

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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. marco / Hace 8 años /

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

      texto o lo que fuese

      mi blog es de wordpress.

      gracias!

      Responder a marco →
    2. Lorena / Hace 8 años /

      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.

      Responder a Lorena →
    3. Lorena / Hace 8 años /

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

      Responder a Lorena →
    4. Francisco / Hace 8 años /

      @Lorena, puede ser algo difícil estar pendientes en post con 2 o más años.

      Responder a Francisco →
    5. manuel / Hace 8 años /

      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

      Responder a manuel →
    6. Francisco / Hace 8 años /

      Que bueno te sirviera Manuel 🙂

      Responder a Francisco →
    7. Knkmna / Hace 7 años /

      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.

      Responder a Knkmna →
    8. Rodolfo / Hace 4 años /

      Muchas gracias

      Responder a Rodolfo →
    9. Dr. Esnetu / Hace 4 años /

      Muchas gracias señor!!

      Responder a Dr. Esnetu →
    10. Miguel / Hace 4 años /

      Perfecto!!
      Gracias….eres un Maquina!!

      Responder a Miguel →
    11. Alan / Hace 3 años /

      Gracias amigo

      Responder a Alan →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad