Linkliste zentrieren, trotz "float: left"

[basti_p]

Hallo,

ich habe eine Navigationsliste:
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>

css:
ul {text-align:center;}
ul li {display:inline;}

Diese Liste soll über die gesamte Seitenbreite zentriert dargestellt werden.
Das funktioniert auch, solange die a-Elemente als inline ausgezeichnet sind.
Da ich aber in den Links mit padding-Werten und Hintergrundbildern arbeiten muss, bekommen diese:

css:
ul li a {display:block;float:left;}

Dann aber ist es mit der Zentrierung innerhalb der Liste vorbei, die Links werden am linken Seitenrand angezeigt. Wie kann ich dieses Problem lösen?

Vielen Dank und Grüße Basti

[suit]

Das funktioniert auch, solange die a-Elemente als inline ausgezeichnet sind.

ja, genauso wie es sein soll

ul li a {display:block;float:left;}

display: block; UND float: left ist überflüssig, display: block kannst du getrost entfernen (es löst aber dein problem nicht)

Dann aber ist es mit der Zentrierung innerhalb der Liste vorbei, die Links werden am linken Seitenrand angezeigt.

text-align wirkt sich nur auf inline-elemente aus

Wie kann ich dieses Problem lösen?

schwer zu sagen, ohne den restlichen code zu sehen bzw die info, "wie genau" es sein soll (woran zentriert?)

mal pauschal geraten: position wäre vielleicht eine möglichkeit (50% nach links und dann einen negativen margin-left um die hälfte der eigenen breite

[basti_p]

Hallo,

Danke für den Tipp - zur Erläuterung: ich möchte die Navigation im Bezug zum Body immer in der horiziontalen Mitte haben. Da die Links aber mit padding-Werten und Hintergrundfarben formatiert werden sollen (also "buttonmäßig"), komme ich um "display: block" nicht herum. Da die Links dann aber untereinanderstehen: "float: left".

Der Hinweis mit der absoluten Positionierung ist gut - aber wie komme ich ohne javascript auf die 50% der eigenen Breite der Liste für den margin-left-Wert?

Grüße Basti

[suit]

Der Hinweis mit der absoluten Positionierung ist gut - aber wie komme ich ohne javascript auf die 50% der eigenen Breite der Liste für den margin-left-Werte

indem du feste werte für die breite vergibst (em eignet sich dafür zb gut)

[ChrisB]

Hi,

Da die Links aber mit padding-Werten und Hintergrundfarben formatiert werden sollen (also "buttonmäßig"), komme ich um "display: block" nicht herum.

Weder padding noch background-image erfordern display:block.

MfG ChrisB

[Alex]

Hi Basti,

vielleicht hilft folgendes

ul {
    margin:0px auto;
}

Gruß,
Alex

[basti_p]

Hallo,

Danke, aber das hatte ich schon versucht - dann müsste ich der Liste eine feste Breite zuweisen; da dass Ganze aber dynamisch erzeugt wird, geht das nicht.

Grüße Basti

[Harlequin]

Yerf!

Das funktioniert auch, solange die a-Elemente als inline ausgezeichnet sind.
Da ich aber in den Links mit padding-Werten und Hintergrundbildern arbeiten muss, bekommen diese:

css:
ul li a {display:block;float:left;}

Eigentlich suchst du ja nach display:inline-block;

Leider gibts nen Browser der das nicht kann (und diesesmal ist es nicht der IE).

Gruß,

Harlequin

PS: muss mal schauen, obs der 3er endlich kann...