¿Puedo colocar una capa div en el centro con CSS?

Escrito por nicole martinez Google | Traducido por beatriz sánchez
¿Puedo colocar una capa div en el centro con CSS?

Usa la propiedad "float" para mover una capa div.

Jupiterimages/Photos.com/Getty Images

Desde el lanzamiento de HTML 4 (lenguaje de marcado de hipertexto), algunas etiquetas más viejas han sido menospreciadas como formas más funcionales de conseguir los mismos resultados que las etiquetas más nuevas. La etiqueta "

" ha sido reemplazada por los valores de las hojas de estilos en cascada (CSS). Aunque puedes usar la propiedad "float" para mover una capa div a la izquierda o la derecha, esta propiedad no ofrece una forma para centrar un objeto.

Otras personas están leyendo

CSS Float

Los "floats" de CSS son propiedades que puedes aplicar a los elementos. A menudo, las aplicas a una imagen, por ejemplo. Pero también puedes aplicarlas a contenedores como tablas o capas div. Los elementos a los que se aplica se mueven horizontalmente o hacia la izquierda o derecha en la pantalla. Los elementos rodeados por ellos, como el texto, también se mueven hacia el mismo lado de la pantalla si no se indica lo contrario. La sintaxis para aplicar "float" a un div tiene un aspecto como este: <div style="float: right">

Valores de "float"

La propiedad "float" de CSS tiene actualmente 4 valores. Cuando la aplicas hacia la izquierda sobre un objeto, se mueve a la izquierda y el resto de elementos fluyen a su alrededor. Aplicarla hacia la derecha tiene el mismo comportamiento pero lo mueve a la derecha. Si asignas el valor "none" a "float" para un elemento aparecerá en su posición normal. Por tanto, no necesitas usar esta propiedad. Un objeto heredará su valor "float" de su padre o elemento de contenedor si ajustas el valor con "inherit". No hay valor "center" para "float".

Centrar un div

Aunque no puedes centrar un div con una propiedad "float", y aunque pudieras, el navegador no podría mostrar el contenido de los lados, puedes usar otros métodos para centrar la capa. Un método habitual incluye asignar el valor "auto" a los márgenes izquierdo y derecho con la siguiente sintaxis: <div style="margin-left: auto; margin-right: auto"> Aunque este método no funciona si ya has especificado un margen izquierdo o derecho, puedes considerar poner tu div en un contenedor que esté centrado y después ubicar mejor una segunda capa dentro de la primera.

Centrar los contenidos del div

La propiedad "text-align" te permite controlar la alineación del texto dentro de cualquier elemento. Es más fácil centrar los contenidos, incluyendo las listas, textos, enlaces e imágenes, dentro de un div que centrar el propio div. Considera la siguiente sintaxis, que reemplazaría el uso de la etiqueta HTML "<center>" ahora menospreciada: <div style="text-align: center"></div> También puedes aplicar texto centrado a elementos individuales dentro del div o a bloques determinados de texto que lo rodea con la etiqueta "<span>".

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media