Come faccio a Centro un menu orizzontale in CSS?

September 12

Centrare oggetti orizzontalmente in fogli di codice CSS (Cascading Style) richiede due cose: una larghezza complessiva e margini automatici. Per il vostro menu orizzontale, fintanto che ha una larghezza già impostato, è possibile aggiungere "margin: auto;" per il codice per centrare sulla pagina. Questo funziona in tutti i browser, anche se il vostro successo dipenderà da quanto bene si codificato il resto della pagina Web. Centratura funzionerà meglio su un menu programmato in HTML come un elenco "non ordinato" o proiettile stile che voi o qualcun altro già dallo stile come un menu con i CSS.

istruzione

1 Aprire la pagina Web contenente il menu orizzontale in Blocco note o un editor di codice. Individuare il foglio di stile per la pagina Web, cercando nella testa del codice per il tag "<link>" che punta a un file CSS. Se si trova più file CSS si fa riferimento, aprire quella principale, di solito chiamato qualcosa di generico come "default" o "stile". Aprire il file CSS a cui fa riferimento la pagina Web.

2 Individuare il codice per il menu orizzontale nel codice della pagina Web. La maggior parte dei menu utilizzare il codice HTML per le liste non ordinate di organizzare i link:

<Ul id = "menu">

<Li> <a href="page1.html"> Page One </a> </ li>

</ Ul>

Prendere nota del nome ID della lista non ordinata. Nell'esempio precedente, il nome ID è "menu". Aggiungere un nome ID se non avete trovato uno nel codice.

3 Vai al file CSS che è stato aperto e scrivere un selettore a "selezionare" il menu dal suo ID nella parte inferiore del file:

menu {}

4 Aggiungere il seguente codice tra le parentesi graffe del vostro selettore CSS:

margin: auto;

Consigli e avvertenze

  • margini automatici si basano su una larghezza per i calcoli. Il menu deve avere un valore di larghezza impostato in CSS, ma la maggior parte avrà già questo codice.
  • Eseguire il backup di tutti i file delle pagine Web, inclusi i file CSS, quando si modifica il tuo sito web.