Cómo centrar una lista horizontal en Div en CSS

Escrito por sean mann | Traducido por eliana caruso
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo centrar una lista horizontal en Div en CSS
Al crear una página Web, puede resultar útil usar CSS para centrar una lista horizontal. (Mike Powell/Lifesize/Getty Images)

Al crear una página Web, puede resultar útil usar CSS para centrar una lista horizontal, como un menú al que puede accederse mediante un clic. Puedes usar CSS, que es un lenguaje de hojas de estilo, junto con HTML para controlar el aspecto de tu página Web. Los estilos CSS a menudo se visualizan de manera impredecible en distintos navegadores web, por lo que es importante revisar tu página Web a fondo antes de publicarla. Una lista sin ordenar (ul, por sus siglas en inglés) es un elemento a nivel de bloque, de modo que puede utilizar la propiedad de ancho para crear un efecto de centrado.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML en un editor de texto como el Bloc de notas de Windows.

  2. 2

    Añade los estilos CSS necesarios para la lista horizontal en la sección "<head>" de tu archivo HTML con el código siguiente:

    <style type="text/css"> .myclass { text-align: center; } .myclass ul { width: 275px; margin: 0px auto } .myclass li { display: block; float: left; height: 50px; line-height: 50px; margin: 5px; width: 125px; border: solid 1px black; } </style>

    El ancho de la lista (ul) será la suma del ancho y de los márgenes de los elementos horizontales (li).

  3. 3

    Crea una lista horizontal en la sección "<body>" del archivo HTML con el código siguiente:

    <div class="myclass"> <ul> <li>first item</li> <li><div>second item in div</div></li> </ul> </div>

    La etiqueta "ul" especifica una lista desordenada. La etiqueta "li" se corresponde con un elemento de la lista. Los elementos de la lista usan los estilos CSS coincidentes definidos anteriormente.

  4. 4

    Guarda el archivo HTML y cárgalo al servidor Web para visualizar la lista horizontal centrada.

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