Hoe centreer ik een navigatiebalk met CSS of HTML?

Ik heb problemen met het centreren van de navigatiebalk op deze pagina.

Ik heb nav { margin: 0 auto; }en een heleboel andere manieren, maar ik kan het nog steeds niet centreren.

Antwoord 1, autoriteit 100%

#nav ul {
    display: inline-block;
    list-style-type: none;
}

Het zou moeten werken, ik heb het op uw site getest.

Antwoord 2, autoriteit 50%

Voeg wat CSS toe:

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

Antwoord 3, autoriteit 17%

Als je navigatie <ul>met class #nav
Dan moet je dat <ul>item in een div-container plaatsen. Maak uw div-container de 100% breedte. en stel het text-align:-element in op het midden in de div-container. Stel vervolgens in uw <ul>die klasse in op 3 specifieke elementen: text-align:center; positie: relatief; en toon: inline-blok;

dat zou het moeten centreren.

Antwoord 4

De beste manier om het te repareren Ik heb gezocht naar de code of truc om het navigatiemenu te centreren en heb de echte oplossingen gevonden die voor alle browsers en voor mijn vrienden werken;)

Dit is hoe ik het heb gedaan:

body {
    margin: 0;
    padding: 0;
}
div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}
ul {
    margin: 0;
    padding: 0;
}
ul li {
    margin-left: auto;
    margin-right: auto;
}

en vergeet niet doctype html5

in te stellen

Antwoord 5

Uw navdivis eigenlijk correct gecentreerd. Maar de ulbinnenkant is dat niet. Geef de ulook een specifieke breedte en midden.

Antwoord 6

U kunt ook float en inline-block gebruiken om uw navigatie als volgt te centreren:

nav li {
   float: left;
}
nav {
   display: inline-block;
}

Antwoord 7

Gewoon toevoegen:

*{
    margin: 0;
    padding: 0;
}
nav{
    margin: 0 auto;
    text-align: center;
}