Center tekst in een DIV

[F-O-C-U-Z]

Ik loop vast. Ik heb een menu op mijn website met de volgende code:

code:

<div id="nav">
    <ul>
        <li class="selected"><a href="http://www.n82.nl">Home</a></li>
        <li class="page_item page-item-10"><a href="http://www.n82.nl/fotos/" title="Foto's">Foto's</a></li>
        <li class="page_item page-item-22"><a href="http://www.n82.nl/howtos/" title="Howto's">Howto's</a></li>
        <li class="page_item page-item-22"><a href="http://www.n82.nl/technical-specs-nokia-n82/" title="Specificaties">Specificaties</a></li>
        <li class="page_item page-item-10"><a href="http://www.n82.nl/tips/" title="Tips">Tips</a></li>
        <li class="page_item page-item-10"><a href="http://forum.n82.nl/" title="Forum">Forum</a></li>
        <li class="page_item page-item-10"><a href="http://systeem.ronaldsinternetecke.nl/contact.php" title="Contact">Contact</a></li>
    </ul>
</div>

Nu wil ik graag dat op de webpagina deze links in het midden worden gecentreerd. In een Style.css wil ik dit graag aangeven. Mijn style.css ziet er momenteel als volgt uit:

code:

#nav {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 25px;
    background: #797979 url(images/menu.jpg);
    font-family: verdana, arial, tahoma;
    font-size: 8pt;
    list-style: none;
    line-height: 1;
    border-top: 1px solid #fff;
    text-align: center;
}

#nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    text-align: center;
}

#nav a {
    display: block;
    line-height: 14pt;
    padding: 4px 9px 2px 9px;
    color:#fff;
    text-decoration: none;
}

#nav a:hover {
    background-color:#fff;
    color: #797979;
}

#nav li { /* all list items */
    float: left;
}

Wat moet ik nu precies aanpassen zodat de links in het midden van het menu komen te staan?
Ik heb al met float zitten spelen en met text-align, helaas maakt dit niets uit. Hoor het graag wanneer jullie meer info nodig hebben, maar volgens mij is dit hetgeen waarin de aanpassingen gemaakt moeten worden.

[Sebazzz]

Dit al geprobeerd?:
Google Zoeken op 'Center CSS' ->> W3C: Centering Things

[F-O-C-U-Z]

thanks voor je antwoord. Ik ben aan het zoeken geweest via google, helaas voor mij zonder resultaat. Ook hetgeen jij gevonden hebt helpt mij niet. Zoals ik al aangegeven heb heb ik al met text-align zitten spelen. Zoals je ziet heb ik op regel 12 van het 2e stuk code dit al toegevoegd. Hoe vaak ik ook refresh helaas zonder resultaat. Alles blijft links uitgelijnd.

[momania]

F-O-C-U-Z schreef op zaterdag 15 maart 2008 @ 18:40:
Zoals je ziet heb ik op regel 12 van het 2e stuk code dit al toegevoegd.

Uhm... je zet je text-align daar op #nav en later nog een keer op #nav ul


Waar staat je tekst in?

[F-O-C-U-Z]

header.php als je dat bedoelt.

Ik heb text-align: center; weggehaald onder #nav ul

Ook dit weer zonder resultaat

[Sebazzz]

F-O-C-U-Z schreef op zaterdag 15 maart 2008 @ 18:48:
header.php als je dat bedoelt.

Nee, hij bedoeld welk element op je pagina. (welke div, span, weetikveel)

[curry684]

Je hebt helemaal geen tekst staan in je #nav, noch in je #nav ul. De eerste bevat namelijk alleen een ul, en de andere een paar li's.

En welke PHP-file het in staat boeit niet zo hoor Heb je al eens met Firebug naar je probleem gekeken? Levert vaak een schat aan inzicht op.

offtopic:
ik vind het trouwens rete-irritant dat je je icon hebt gejat van een nogal veel postende regular hier waarvan ik weet dat ie deze specifieke versie van het icon zonder rondvliegend bloed en ogen zelf heeft gemaakt. Kun je wellicht om verwarring te voorkomen een ander icon uitzoeken?

[ Voor 37% gewijzigd door curry684 op 15-03-2008 18:55 ]

[mjax]

Volgens mij moet je text-align op de A tag, omdat je die als display: block rendert.

[Zerora]

Cascading Stylesheet:

*
{ text-align: center; }

Werkt vast wel

Modbreak:

Wil je dit soort grapjes de volgende keer niet meer maken? Ondanks de smiley gaan mensen hier, zoals je ziet, serieus op in, en dat betekent een onnodige semi-offtopic discussie. Lijkt me niet helemaal de bedoeling.

[ Voor 63% gewijzigd door een moderator op 17-03-2008 00:04 ]

[TeeDee]

offtopic:
eens met curry684

De manier waarop je vraagt: "wat moet ik nu aanpassen" doet bij mij de 3rd party bellen rinkelen.

[alex3305]

Zerora schreef op zaterdag 15 maart 2008 @ 18:59:

Cascading Stylesheet:

*
{ text-align: center; }

Werkt vast wel

Of desnoods;

Cascading Stylesheet:

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

[b19a]

De "oplossing" met text-align zal niet gaan werken. Je elementen zijn namelijk block-elementen met een float, die zijn niet te centreren met een text-align. Als alle browsers inline-block zouden ondersteunen was je hele probleem niet ontstaan. Dan had je zonder floats kunnen werken en had text-align simpelweg gewerkt.

Cascading Stylesheet:

a { display: inline-block; }

Als iemand dit weet op te lossen ben je mijn held van de dag. Een block>float-constructie heb ik nog niet correct gecentreerd weten te krijgen. Een smerige hack: met padding-left op de <ul> het centreren nabootsen; je kunt dan alleen geen dynamische menu-items gebruiken.

[MrDummy]

Al gedaan met gecentreerde buitendiv, en dan binnendiv met vaste breedte voor de menu?

Dat werkt goed. De buitendiv moet dan margin left en right op auto zetten, maar ook buitendiv moet ook vaste breedte hebben. Deze methode wordt gebruikt in pagina's centreren.

Is dat toepasbaar op je menu, zodat je geen padding left hoeft te doen?