XHTML: Elemente horizontal und vertikal zentriert darstellen

Enigma

Captain Pro
Registriert
Apr. 2004
Beiträge
3.920
Ich versuche gerade einen Button zentriert auf einer Seite darzustellen - sehe allerdings kein Land :(

Ich hab zwar irgendwo die Behauptung gefunden, dass es nicht möglich ist mit CSS Elemente vertikal zu zentrieren - habe jedoch folgendes (pfusch) Workaround gefunden, das nicht funktioniert:
HTML:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Teschd</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
  </head>
  <body style="border:0px;margin:0px;padding:0px;height:100%;width:100%;">
  
  <div style="display: table; margin:auto; height:100%;">
    <div style="display: table-row;">
      <div style="display: table-cell; vertical-align: middle; height:100%">
        <button style="border-width:0px;background-color:white;">Ich bin sowohl horizontal als auch vertikal zentriert ... oder auch nicht</button>
      </div>
    </div>
  </div>
  </body>
</html>
Hatte jemand von euch schon das gleiche Problem?
 
Interessant im Webbereich die Aussage: geht (noch) nicht zu hören :) Hat Seltenheitswert.

Die Lösung mit Javascript ist funktional - werd ich mir dann mal genauer ankucken - danke.
 
Weiss nichts genaues, aber es könnte durchaus sein, dass sowas Einzug in CSS3 haben wird, muss ich mich mal schlau machen.
 
Hallo,

natürlich klappt das auch mit CSS. ;)
Probiere es einmal mit folgendem Code:

Code:
position: absolute; // oder je nach Anwendung auch "relative"
top: 50%;
left: 50%;
margin-top: -y // für "y" halbe Elementhöhe einsetzen
margin-left: -x // für "x" halbe Elementbreite einsetzen

MfG mh1001
 
schon klar, aber was machst du mit dynamischen höhen ?

horizontal geht auch einfacher mit

margin-left: auto;
margin-right: auto;
 
Ja, das stimmt natürlich - da stößt das ganze dann natürlich an seine Grenzen.
Eine reine CSS-Lösung für dynamische Elementhöhen habe ich leider auch nicht parat.
Bei obigem Beispiel bin ich einfach mal davon ausgegangen, dass das entsprechende Element eine nahezu feste Höhe hat. Dabei könnte man die margin-Angaben zur exakteren Positionierung noch durch Angaben mit "em" als Maßeinheit ersetzen.

MfG mh1001
 
Muss man halt auf die guten altmodischen Tabellen zurückgreifen - dann gehts wenigstens auch noch im IE :D
 
Probier' mal das:

HTML:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Teschd</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <style type="text/css">
    html, body { margin:0; padding:0; height:100%; width:100% }
    </style>
  </head>
  <body>
  <div style="display: table; margin:auto; height:100%;">
    <div style="display: table-row;">
      <div style="display: table-cell; vertical-align: middle; height:100%">
        <button style="border-width:0px;background-color:white;">Ich bin sowohl horizontal als auch vertikal zentriert ... oder auch nicht</button>
      </div>
    </div>
  </div>
  </body>
</html>

Der Trick liegt darin, dem Element html, welches außerhalb des Elements body liegt, ebenfalls Höhe und Breite von 100% zuzuweisen.
Der MS-Browser wird es aber wohl nicht hinbringen.
 
Zurück
Oben