CSS3 und immer noch Problem mit vertikaler zentrierung?

[molily]

Hallo,

Naja, wie auch immer, empfohlen wird auf diversen Seiten, das Ganze zu ändern in:
display:table-cell

Du solltest schon verstehen, was das überhaupt tut.

Wenn du einem Element display: table-cell gibst, werden anonyme Container-Boxen mit display: table, display: table-row-group und display: table-row erzeugt, genau wie bei einer HTML-Tabelle mit table, tbody, tr und th/td. In CSS-Hinsicht verhält sich die Box dadurch wie die einer normalen Tabellenzelle.

Dann haben die DIV-Blöcke keinen Abstand mehr zueinander und das trotz margin-Angabe.

Da dir Tabellen bekannt sind, könntest du wissen, dass Tabellenzellen keine Margins haben, sondern der Abstand zwischen den Zellen mit cellspacing (HTML-Attribut) bzw. border-spacing (CSS-Eigenschaft) geregelt wird. Daher wird die margin-Angabe logischerweise ignoriert.

Würdest du hier eine HTML-Tabelle verwenden, hättest du das Problem mit den Abständen auch nicht gelöst.

Du kannst hier weitere Elemente einfügen, um margins + table-cell zu nutzen:

<ul>  
  <li>  
    <div>Content</div>  
  </li>  
  <li>  
    <div>Content</div>  
  </li>  
  <li>  
    <div>Content</div>  
  </li>  
</ul>

li { margin: 10px; }  
div { display: table-cell; }

Wie du hier die li-Boxen nebeneinander bekommst, ist beliebig. Du kannst display: inline-block, float: left oder sonst etwas verwenden.

Du kannst natürlich auch eine Tabelle mit border-spacing verwenden. Dann benötigst du ein Containerelement, dem du display: table gibst – wie bei HTML-Tabellen.

<ul>  
  <li>Content</li>  
  <li>Content</li>  
  <li>Content</li>  
</ul>

ul { display: table; border-spacing: 10px; }  
li { display: table-cell; }

Das ist beides nicht CSS 3, sondern stinknormales CSS 2.1. Im Rahmen von CSS 3 gibt es z.B. Flexbox, welches von neueren Browsern unterstützt wird.

Beispiel: http://dabblet.com/gist/8270383

Hier müssen ggf. noch Vendor-Prefixes eingefügt werden. Auf Dabblet.com erledigt das ein JavaScript namens Prefixfree.

Grüße
Mathias