Andreas Gaisbauer
Erfahrenes Mitglied
Wie kann ich Ebenen oder Elemente zentrieren?
Hier exemplarisch 2 CSS Methoden, entweder :
oder:
Eine weitere Methode vom Forumsuser "muhkuh"
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...
Quelle: http://chrispoole.com
Ein weiterer Ansatz ist es mit einer Tabelle zu versuchen:
das "Height"-Attribut ist zwar nicht im W3C Standard, wird aber von den Browser erkannt.
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>
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>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>
