Come centrare una lista orizzontale in una Div in CSS

Autore: Laura McKinney
Data Della Creazione: 2 Aprile 2021
Data Di Aggiornamento: 17 Novembre 2024
Anonim
Come centrare elementi in HTML | Positioning in CSS - posizionare gli elementi con CSS
Video: Come centrare elementi in HTML | Positioning in CSS - posizionare gli elementi con CSS

Contenuto

Quando si crea una pagina Web, può essere utile usare i CSS per centrare un elenco orizzontale, come un menu cliccabile. Puoi usare CSS, che è un linguaggio di stile, accanto all'HTML per controllare l'aspetto della tua pagina. Gli stili CSS vengono spesso visualizzati in modo imprevedibile in diversi browser Web, quindi è importante testare accuratamente la pagina prima di pubblicarla. Un elenco non ordinato (ul) è un elemento a livello di blocco, quindi è possibile utilizzare la proprietà width per creare un effetto centralizzato.


indicazioni

Puoi utilizzare CSS e HTML per controllare l'aspetto della tua pagina web (Comstock / Stockbyte / Getty Images)

  1. Apri il tuo file HTML in un editor di testo, ad esempio Blocco note di Windows.

  2. Aggiungi gli stili CSS richiesti all'elenco orizzontale nella sezione "" del tuo file HTML aggiungendo il seguente codice:

    type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; margine: 0px auto} .myclass li {display: block; float: a sinistra; altezza: 50 px; altezza della linea: 50px; margine: 5px; larghezza: 125 px; bordo: solido 1px nero; }

    La larghezza della lista (ul) rappresenta la somma della larghezza e dei margini degli elementi orizzontali (li).

  3. Crea un elenco orizzontale nella sezione ">" del file HTML aggiungendo il seguente codice:


    • primo oggetto
    • secondo elemento in div

    Il tag "ul" specifica una lista non ordinata. Il tag "li" corrisponde a un elemento nell'elenco. Gli elementi dell'elenco usano stili CSS che corrispondono a quelli definiti sopra.

  4. Salvare il file HTML e caricarlo sul server Web per visualizzare l'elenco orizzontale centrato.