[CSS] Wie kann ich Ebenen oder Elemente zentrieren?

Status
Nicht offen für weitere Antworten.

Andreas Gaisbauer

Erfahrenes Mitglied
Wie kann ich Ebenen oder Elemente zentrieren?

Hier exemplarisch 2 CSS Methoden, entweder :
PHP:
<body style="margin:20px 0px; padding:0px; text-align:center;">
<div id="bla" style="width:400px; height:400px; border:1px solid black; margin:0px; text-align:left; padding:6px;">
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
</div>
oder:
PHP:
<body style="padding:10%; text-align:center;">
<div id="bla" style="width:100%; height:100%; border:1px solid black; text-align:left; overflow:auto;">
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
    Inhalt<br>
</div>

Eine weitere Methode vom Forumsuser "muhkuh"
CSS:
      html, body {
          width: 100%;
          height: 101%;
      }

      #content {
          position: relative;
          left: 50%;
          margin-left: -300px; /* margin-left = invert(width / 2)! */
          width: 600px;
          /* optional kann man das gleiche auch auf die Höhe anwenden */
          top: 50%;
          margin-top: -200px; /* margin-top = invert(height / 2)! */
          height: 400px;
      }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
  <head>  
    <title>Zentrieren mit CSS</title> 
  </head> 
  <body>  
    <div id="content">  Ich bin der zentrierte DIV-Container "content"! </div> 
  </body> 
</html>

Funktioniert in allen Browsern gleichermaßen. So fällt auch die Rückformatierung mit text-align weg, was doch recht angenehm ist.



Ein weiteres - sehr gutes - Skript kommt von Chris Poole - es ist allerdings Javascript basierend...
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?xml version="1.0" encoding="UTF-8"?><HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <TITLE>chrispoole.com » scripts » centeralleg</TITLE>
  <META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
#box { Z-INDEX: 3; BACKGROUND: red; POSITION: absolute; }
#box2 {	Z-INDEX: 2; BACKGROUND: blue; WIDTH: 300px; POSITION: absolute; HEIGHT: 300px; }
#box3 {	Z-INDEX: 1; BACKGROUND: yellow; WIDTH: 500px; POSITION: absolute; HEIGHT: 500px; }
</STYLE>

<SCRIPT type=text/javascript>
    var objID = new Array();
    objID[0] = "box";
    objID[1] = "box2";
    objID[2] = "box3";
</SCRIPT>

<BODY onload=centerAll();>
<DIV id=box>content</DIV>
<DIV id=box2>content</DIV>
<DIV id=box3>content</DIV>
<SCRIPT type=text/javascript>

    /****************************************************
    *	Center All:
    *		by Chris Poole
    *		http://chrispoole.com
    *
    *		Keep this notice intact to use it :-)
    ****************************************************/

function centerAll() {
    var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
    var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
    for (x=0;x<objID.length;x++) {
        var objRef = document.getElementById(objID[x]);
        var objW = objRef.offsetWidth;
        var objH = objRef.offsetHeight;
        objRef.style.left = ((pageX/2)-(objW/2))+"px";
        objRef.style.top = ((pageY/2)-(objH/2))+"px";
    }
}
window.onresize=centerAll;
</SCRIPT>
</BODY></HTML>
Quelle: http://chrispoole.com


Ein weiterer Ansatz ist es mit einer Tabelle zu versuchen:
PHP:
<table border="0" align="center" width="100%" height="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">Inhalt</td>
  </tr>
</table>
das "Height"-Attribut ist zwar nicht im W3C Standard, wird aber von den Browser erkannt.
 

Anhänge

Status
Nicht offen für weitere Antworten.
Zurück