Cómo centrar una etiqueta div de ancho fijo

Escrito por richard kalinowski | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo centrar una etiqueta div de ancho fijo
Las etiquetas div permiten trabajar con imágenes dinámicas y demás elementos de bloque. (Jupiterimages/Comstock/Getty Images)

Las hojas de estilo en cascada es el lenguaje utilizado habitualmente en la programación de sitios web para añadir fuentes dinámicas, estilos y colores a las páginas Web. Las etiquetas "Div" son una parte importante del CSS, comúnmente usados para añadir elementos gráficos a un sitio web. Te permiten agregar capas complejas de imágenes o texto gráfico a capas simples de código. Puedes pensar en divs como bloques de contenido que se puede colocar dentro o sobre el resto de tu código CSS. Una vez que hayas creado una etiqueta div de ancho fijo, puedes centrarlo usando CSS.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo de hoja de estilos de la página web en tu programa de edición de HTML. Dependiendo del programa, abrir la hoja de estilo varía. En muchos programas, esto se hace mediante un clic en "Código fuente" o "HTML", y luego clic en "CSS" o "Estilo". Si no puedes determinar cómo abrir la hoja de estilos en el programa, pulsa la tecla "F1", esto abrirá un menú de ayuda en la mayoría de los programas de Windows.

  2. 2

    Localiza la etiqueta div de ancho fijo en tu código CSS. Éste es un ejemplo de código para una etiqueta div con ancho de 500 píxeles: div#main { width: 500px; }

  3. 3

    Añade márgenes automáticos izquierdo y derecho dentro de las llaves del div. Esto centra el div en tu página web. En el ejemplo de un div 500 píxeles, el código de márgenes automáticos es el siguiente: div#main { width: 500px; margin-left: auto; margin-right: auto }. El código de margen automático se aplica a divs de cualquier tamaño o forma.

  4. 4

    Guarda los cambios y cierra el archivo de la hoja de estilo.

No dejes de ver

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