Sönke Tesch: Element mittig positionieren

Beitrag lesen

Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

Wenn Du ein Element bei oben 0, links 150 positionierst, wird es wohl kaum in der Mitte auftauchen können, oder? Darüberhinaus besagt text-align:center, daß der Text im Element zentriert wird, nicht das Element selber (http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop).

Um ein Blockelement zu zentrieren, mußt Du margin-left und margin-right auf auto setzen (http://www.w3.org/TR/REC-CSS2/visudet.html#q6). Um Inline-Elemente zu zentrieren, setzt Du im darüberliegenden Element text-align auf center.

Da Deine Grafik sicherlich im verbleibenden Raum neben dem Menü zentriert werden soll und nicht im Fenster, mußt Du wohl neben dem Menü noch ein <div> aufmachen, daß als Container und Zentrierhilfe für die Grafik dient.

Gruß,
  soenk.e