Hét vraag- en antwoordplatform van Nederland

Hoe centreer ik de items van mijn menu, met behoud van achtergrondkleur over de hele breedte?

Hi all,
Ik heb een header, en wil mijn menu daaronder, over de gehele breedte van die header, en in dezelfde kleur als de header.
Maar de list items wil ik graag centreren, net als het logo in de header, en de rest van de content.
Ik heb het geprobeerd met align:center; en margin:0 auto; maar het wil niet lukken.
Wat doe ik verkeerd?


/*MAIN MENU */
nav ul {list-style:none; background-color:#c3e1fb;}
nav ul:after {content: '.'; clear: both; visibility: hidden; display: block; height:0px;}

nav ul li {float:left; position:relative; line-height: 30px; padding-left:2px; padding-right:2px}
nav ul li a {color:#05334d; text-decoration:none; text-align:center; padding: 20px 27px 20px; font-size:20px;}
nav ul li:hover > a {font-weight:bold}

Verwijderde gebruiker
7 jaar geleden
1.8K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (1)

/*MAIN MENU */
nav ul {list-style:none; background-color:#c3e1fb;}
nav ul:after {content: ‘.’; clear: both; visibility: hidden; display: block; height:0px;}

nav ul li {float:left; position:relative; line-height: 30px; padding-left:2px; padding-right:2px}
nav ul li a {color:#05334d; text-decoration:none; text-align:center; padding: 20px 27px 20px; font-size:20px;}
nav ul li:hover > a {font-weight:bold}

De float:left; in je nav ul/li egt op dit moment dat het geheel naar links moet.
Dat zul je dus aan moeten passen.

Toegevoegd na 31 seconden:
*zegt op dit moment moet er staan

Toegevoegd na 7 minuten:
Good practice is het structureren als volgt, al wordt het daar wel wat langer van.

/*MAIN MENU */
nav ul {
list-style: none;
background-color: #c3e1fb;
}
nav ul:after {
content: ‘.’;
clear: both;
visibility: hidden;
display: block;
height:0px;
}

nav ul li {
float:left;
position:relative;
line-height: 30px;
padding-left:2px;
padding-right:2px
}

nav ul li a {
color:#05334d;
text-decoration:none;
text-align:center;
padding: 20px 27px 20px;
font-size:20px;
}

nav ul li:hover > a {
font-weight:bold
}
(Lees meer...)
Verwijderde gebruiker
7 jaar geleden
Verwijderde gebruiker
7 jaar geleden
Thanks, dat ziet er inderdaad wat overzichtelijker uit.
Als ik de Float:left; weg haal, dan staan de list items weer onder elkaar. Enig idee hoe ik dat dan toch naast elkaar krijg?
Verwijderde gebruiker
7 jaar geleden
Misschien met een text-align: center; ipv of i.c.m. de float left.
Verwijderde gebruiker
7 jaar geleden
kijk ook eens op: https://www.w3schools.com/css/css_align.asp

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding