Css blockelemente vertikal zentrieren

Hallo,

ich habe ein Problem mit der Vertikalen Zentrierung:

.box{    
    float: left; 
    width:  300px;
    height: 300px;    
    display: table-cell;    
    vertical-align: middle;
    background-color: #7FD4FF;                
    
  }   

Wenn ich float left aktiviere, funktioniert die Zentrierung nicht, laß ich es raus, geht es wieder.

Jedoch wollte ich 2 Blöcke nebeneinander stehen haben mit der selben Breite und Höhe und den Inhalt jeweils Vertikal zentriert ausgeben, deshalb benötigte ich die Float-Anweisung.

Kann mir da jemand weiter helfen?

Viele Grüße seroinfo

Ein Link zu der Seite, wo das Problem auftritt, wäre wünschenswert.

Hier eine Testseite:

seroinfo.bplaced.net/testen.htm

So wie du es hast, kann es sowieso nicht gehen, da du mit vertical-align Text nur in inline-Elemente ausrichten kannst. Lies dazu auch mal: css4you.de/Texteigenschaften … align.html
Das Beispiel auf der Seite sollte dir auch weiterhelfen.

Edit: Es fehlt natürlich außerdem noch line-height :wink:

Danke zunächst für die Antwort. Das vertical-align ist nur für Inline, das ist richtig, aber in Zusammenhang mit display: table-cell sollen auch DIV-Elemente vertikal zentriert werden können, so meine Info.

Viele Grüße seroinfo

PS: Ich hatte es jetzt mal ohne float probiert, hier gehts, dass sie auch ohne anweisung nebeneinander stehen. Mal sehen, ob ich es so auch in Joomla umgesetzt bekomme, da wollen die Elemente irgendwie ohne float nicht so richtig.

Eine vertikale Zentrierung ist im normalen Layout-fluss generell nicht sinnvoll möglich.

@Balmung, das kann man so nicht sagen, es gibt einige Möglichkeiten.

Für den hier vorliegenden Fall würde ich vorschlagen, entweder display:inline-block statt table-cell zu nutzen, oder auch noch als table-row und table dargestellte Elemente drumherum zu legen.

Das Element ist ja in Höhe und Breite dimensioniert, da gibt es einige Möglichkeiten, eventuell
auch mit direkter Positionierung.
Da allerdings Höhe und Breite in Pixeln festgelegt sind, eignet sich das ohnehin eher für Pixelgraphik,
wo man die Abmessungen kennt oder kennen kann, von daher ist es recht einfach,
per Positionierung oder Seitenabstand eine vertikale Zentrierung hinzubekommen.

Bei Text sollten Breite und Höhe wohl nicht in px angegeben sein. Ansonsten sollte man da wohl
in der Tat weiterkommen, indem man eine komplette Tabelle per CSS simuliert, bei einer solchen
geht es ja auch recht problemlos.

Auch wenn float nicht so recht mit dem Rest harmonieren will, kann es helfen, ein weiteres Element
zu spendieren und das dann eben auf zwei verschachtelte Elemente zu verteilen.

Hallo,

danke an Alle, die ihr Wissen kundgetan haben. Ich habe es nun auch in Joomla umsetzen können. Der Fehler lag daran, dass dort eine Klassenzuordnung dazu führte, dass ohne Float-Anweisung die Elemente untereinander angeordnet wurden. Als ich die Klassenzuordnung löschte, haben sich die Elemente, wie in meiner Testseite verhalten. Also ein Float war nicht mehr nötig und dadurch war eine vertikale Zentrierung wieder möglich.

Leider kann ich hier auf die Joomlaseite nicht verlinken, da ich sie auf meinem eigenen PC zwecks Experimentierens installiert habe. Ich versuche dennoch mal in Worten zu beschreiben, was Sinn uns Zweck der ganzen Veranstaltung sein sollte.

Es sollte eine Übersichtsseite geben, die zu den verschiedenen Themenbereichen führt. Dazu habe ich eben diese 4 “Kästen” mit vorgegebener Größe erstellt, die im Inhalt eine Grafik und Beschriftung erhalten. Auf der Grafik liegt der Link zum Themenbereich. Die Hintergrundfarbe des jeweiligen “Kästchens” soll sich auf den jeweiligen Themenseiten wiederfinden. Ich hätte natürlich dies auch direkt über eine Tabelle layouten können, doch soll man ja zwecks Barierefreiheit eher über DIV-Container gehen.

Ich hoffe, es wird ein wenig klar, worum es geht.

@Balmung warum ist eine vertikale Zentrierung nicht sinnvoll? Wohlgemerkt, sie sollte nur für die jeweiligen “Kästchen” (Div-container) gelten, nicht aber für das gesamte Layout.

Viele Grüße seroinfo