Cómo centralizar una lista horizontal en un Div en CSS

Autor: Laura McKinney
Fecha De Creación: 2 Abril 2021
Fecha De Actualización: 22 Junio 2024
Anonim
Cómo centralizar una lista horizontal en un Div en CSS - Artículos
Cómo centralizar una lista horizontal en un Div en CSS - Artículos

Contenido

Al crear una página Web, puede ser útil utilizar CSS para centralizar una lista horizontal, como un menú de clic. Puede utilizar CSS, que es un lenguaje de hoja de estilo, junto al HTML para controlar el aspecto de su página. Los estilos CSS, a menudo, se muestran de forma imprevisible en diferentes navegadores web, por lo que es importante probar completamente su página antes de publicarla. Una lista no ordenada (ul, del inglés "unordered list") es un elemento a nivel de bloque, por lo que puede utilizar la propiedad de ancho para crear un efecto centralizado.


instrucciones

Puede utilizar CSS y HTML para controlar el aspecto de su página Web (Comstock / Stockbyte / Getty Images)
  1. Abra su archivo HTML en un editor de texto, como el Bloc de notas de Windows.

  2. Añada los estilos CSS necesarios para la lista horizontal en la sección "" de su archivo HTML agregando el siguiente código:

    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; }

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

  3. Cree una lista horizontal en la sección ">" del archivo HTML agregando el siguiente código:


    • primer elemento
    • second item in div

    La etiqueta "ul" especifica una lista no ordenada. La etiqueta "li" corresponde a un elemento de la lista. Los elementos de la lista utilizan los estilos CSS que coinciden con los definidos anteriormente.

  4. Guarde el archivo HTML y cargue en su servidor Web para ver la lista horizontal centralizada.