Liste zentrieren?

Pyrofreak · 28.04.2008, 20:56

Hallo!

Ich möchte gerne eine Liste zentrieren und das gelingt mir nicht, auch
die "Suche" hat nix gebracht, obwohl es schon so viele "ähnliche" Beiträge gibt...

Code html:

<div class="Zentriert">
<ul id="XXX">
<li>
<li>
.
.
.
</ul>
</div>

CSS Code:

.Zentriert {
margin: 0 auto;
}

#XXX {

text-align: left;
.
.
.
}

Möchte die Liste mit "text-align: left" formatieren, dass die einzellnen Listeneinträge schön "gleichmässig untereinander" stehen und dann soll
der ganze Listenblock nochmal zentriert werden also in die Mitte der Seite! Das geht doch nur wenn ich einen div Block so wie oben um die Liste anordne, oder? Wie gesagt es geht leider nicht, sollte doch aber funtionieren oder?

gr Pyro

Boris · 28.04.2008, 22:13

Ein wenig CSS Grundlagen würden dir helfen.

Ein DIV und ein UL sind Blockelemente, sprich: automatisch maximal so breit, wie sie Platz haben (100%).

Mit margin: 0 auto kannst du zwar korrekterweise Blockelemente zentrieren, allerdings musst du denen logischerweise eine bestimmte Breite vorgeben - denn 100% kann man schlecht zentrieren.

Wenn du nun die Texte innerhalb von LI zentriert haben willst, musst du dem LI ein text-align: center; vergeben.

Also - dem DIV oder UL eine Breite vergeben, margin: 0 auto und dem LI ein text-align: center ... fertig

Pyrofreak · 28.04.2008, 23:28

@Danke Boris

Ja sorry aber ich lerne das meiste aus Büchern und alles steht da halt auch nicht drinnen leider...

gr Pyro

doCOMP · 29.04.2008, 07:32

Probiere es mal wie folgt: Gib deinem div block die gewünschte Größe, damit der ganze content den du auf der Seite verwenden möchtest hineinpasst - erstelle also quasi einen "Hauptlayer"

Weise dem Hauptlayer folgenden code zu:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Contact us</title>
<style type="text/css">
<!--
#Hauptlayer {
position:absolute;
left:50%;
width:deine weite px;
margin-left:- hälfte deiner weite px;
top:50%;
height: deine höhe px;
margin-top:- hälfte deiner höhe px;
z-index:1;

Der Hauptlayer ist immer schön zentriert im Browser!

Gruß,
doCOMP

Boris · 29.04.2008, 10:44

Er hat nicht gefragt, wie man ein DIV horizontal und vertikal zentriert.

doCOMP · 29.04.2008, 16:54

uuppsss ...

also pyrofreak, schenk meiner antwort einfach keine beachtung