ubuntuusers.de

Ich bin mal wieder beim Zentrieren eines Elementes (in diesem Fall eine "ul") über das Problem gestolpert, dass man nur block-Elemente mit "margin:auto" zentrieren kann (richtig, oder?) Da ich nur bei einigen Elementen aus dem Kopf weiß, wie sie dargestellt werden (div ist block, span inline - soviel kann ich mir noch merken 😉 suche ich nach einer vollständigen Übersicht über alle html-Tags, in der bei jedem Tag dabei steht, ob es sich per default um ein Inline- oder ein Block-Element handelt. Bei w3schools gibt es zwar eine (vollständige?) html-Tag-Liste, aber leider steht die von mir gesuchte Angabe nicht dabei. (oder ich habe sie einfach nicht gefunden)

Zum aktuellen Problem: ich schaffe es nicht, eine ul in einem Container div zu zentrieren:

HTML:

<div id="container">
 <ul id="pages">
  <li class="page">
   <img src="images/dummy1.png" onclick="update_page(1)"/>
  </li>
  <li class="page">
   <img src="images/dummy2.png" onclick="update_page(2)"/>
  </li>
  <li class="page">
   <img src="images/dummy3.png" onclick="update_page(3)"/>
  </li>
 </ul>
</div>

CSS:

ul#pages{
display: block;
margin: auto;
}

Ups, tut mir furchtbar leid, ich hätte doch noch länger suchen sollen, bevor ich hier schon wieder frage:

http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente

Hier sind alle Block-Elemente gelistet. Sorry für voreilige Frage 😐

Kann mir evtl. aber noch jemand sagen, warum ich die ul nicht zentriert bekomme?

Hi.

Arubeto schrieb:

http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente

Jo, bei selfhtml findet man eigentlich alles.

Kann mir evtl. aber noch jemand sagen, warum ich die ul nicht zentriert bekomme?

Weil dein DIV schon nicht Zentriert ist und dieses nur so groß wie sein Inhalt ist?

stfischr schrieb:

Hi.

Arubeto schrieb:

http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente

Jo, bei selfhtml findet man eigentlich alles.

Kann mir evtl. aber noch jemand sagen, warum ich die ul nicht zentriert bekomme?

Weil dein DIV schon nicht Zentriert ist und dieses nur so groß wie sein Inhalt ist?

Sorry, ich habe vergessen zu erwähnen, dass ich das im Stylesheet auch schon festgelegt habe:

div#container{
	margin: 0px auto;
	height: 100px;
}

Da ein div doch von vorneherein ein Block-Element ist, müsste ich es mit margin:0px auto; doch zentriert bekommen, oder? Das "container"-div scheint leider nicht die Breite der enthaltenen Liste zu haben, sondern geht über die volle Breite: wenn ich mir die Seite mit Firebug angucke und das div markiere, geht es vom linken bis zum rechten Rand des Elternelementes.

Hm, wenn das div schon volle Breite hat, dann musst du nurnoch sagen, dass der Inhalt zentriert werden soll.

Hm, ich habe dem div nicht bewusst volle Breite gegeben. Eigentlich wollte ich, dass es sich nach der Größe des Inhalts (sprich: der Größe der ul) richtet. Weißt Du, was ich falsch gemacht habe? Und eigentlich habe ich doch auch die enthaltene Liste mit margin:auto; zentriert, oder?

Arubeto schrieb:

Hm, ich habe dem div nicht bewusst volle Breite gegeben. Eigentlich wollte ich, dass es sich nach der Größe des Inhalts (sprich: der Größe der ul) richtet. Weißt Du, was ich falsch gemacht habe? Und eigentlich habe ich doch auch die enthaltene Liste mit margin:auto; zentriert, oder?

1
2
3
4
5

<div style="text-align:center">
	<div style="margin:auto; text-align:left">
		Dieser Layer ist zentriert.
	</div>
</div>

So müsste es funzen, von da kannst du weiterarbeiten. Achso der äußere DIV sollte immer die volle Breite nutzen, weil sonst wird zwar Zentriert aber keiner siehts. Mit borders ganz gut überprüfbar.

Blockelemente nehmen im Gegensatz zu inline bei "auto" den maximal möglichen Wert an. Du hast also nichts falsch gemacht, dass das div die volle Breite einnimmt ist so zu erwarten. Ein Inlineelement, das zur Formatierung gedacht ist, ist <span>.

Ich bekomme es einfach nicht gebacken. Folgendes habe ich ausprobiert:

<div style="text-align:center height:226px">
 <div style="margin:auto text-align:left">
  <ul id="pages">
   <li class="page">
    <img src="images/dummy1.png"/>
   </li>
...
  </ul>
 </div>
</div>

Funktioniert nicht, die ul wird nicht zentriert dargestellt.

@stfischr: meintest Du mit dem inneren "div" die "ul"? Weil, eigentlich habe ich ja kein zweites geschachteltes "div", und mit der Liste scheint es nicht zu funktionieren. Ich meine auch irgendwo mal gelesen zu haben, dass man "text-align" auch tatsächlich nur für Text, und nicht für andere Tags verwenden soll; ist das richtig?

@adun: leider habe ich nicht verstanden, wie ich dann mein Problem lösen kann. In der ersten Version hatte ich nur eine ul in einem div. Dieses div durfte gerne die volle Breite haben, solange wenn die Liste sich zentriert in diesem einen, die volle Breite umfassenden div platzieren ließe.

Dann habe ich die ul auf "display:inline" umgestellt, weil ich hoffte, dass sie dann nicht die ganze Breite einnehmen würde (ul ist laut selfhtml per default ein Blockelement). Das hat aber auch nichts gebracht.

Letzter Versuch: Ein zusätzliches Element zwischen div und Liste; erst habe ich ein weiteres div probiert. Die Liste scheint auch darin zu liegen, aber die Listenelemente liegen nicht in der Liste und letztere schwebt irgendwo ganz klein in der Gegend. Dann habe ich ein Span als Zwischenelement benutzt, aber das hat auch nicht geklappt.

Wo liegt der Fehler? Ich verzweifele langsam daran...

Arubeto schrieb:

@stfischr: meintest Du mit dem inneren "div" die "ul"?

Jupp.

1
2
3
4
5
6
7

<div style="text-align:center: height:226px;border-color:cyan; border-width:8px; border-style:solid;">
  <ul id="pages" style="width:100px; margin:auto; text-align:left; border-color:red; border-width:8px; border-style:solid;">
   <li class="page">
    <img src="images/dummy1.png"/>
   </li>
  </ul>
</div>

Ich hab dir bei diesem Beispiel mal die borders mit reingemacht, damit kann man schön debuggen. ☺