Hvordan jeg senter en horisontal meny i CSS?

Sentre elementer horisontalt i Cascading Style Sheets (CSS) kode krever to ting: en total bredde og automatiske marginer. For horisontale menyen, så lenge den har en bredde allerede satt, kan du legge til "margin: auto;" til koden for å sentrere det på siden. Dette fungerer i alle nettlesere, men din suksess vil avhenge av hvor godt du kodet resten av websiden. Sentre vil fungere best på en meny programmert i HTML som en "uordnet" eller bullet-stil liste som du eller noen andre allerede stylet som en meny ved hjelp av CSS.

Bruksanvisning

1 Åpne websiden som inneholder horisontale menyen i Notepad eller en kode editor. Finn stilark for din webside ved å se på hodet av koden for funksjonen "<link>" tag peker til en CSS-fil. Hvis du finner flere CSS-filer refererte, åpne den viktigste, vanligvis kalt noe generisk som "default" eller "stil". Åpne CSS-filen referert av websiden.

2 Finn koden for den horisontale menyen på websiden kode. De fleste menyer bruke HTML for sorterte lister til å organisere linker:

<Ul id = "meny">

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

</ Ul>

Legg merke til ID navnet på den sorterte liste. I det ovenstående eksempel er ID navnet "meny". Legg et ID-navnet hvis du ikke finner en i koden.

3 Gå til CSS-filen som du åpnet og skrive en velgeren på "velg" menyen ved sin ID helt nederst i filen:

Menyen {}

4 Legg til følgende kode mellom klammeparentes av CSS selector:

margin: auto;

Hint

  • Automatiske marginer er avhengige av en bredde for sine beregninger. Din menyen må ha en bredde verdien satt i CSS, men de fleste vil allerede ha denne koden.
  • Sikkerhetskopiere alle websidefiler, inkludert CSS-filer, når du redigerer ditt nettsted.