✔ Div Element Zentrierung

Mororu · 5. Juli 2007

Hallo zusammen

Ich habe ein grosses Problem ich möchte ein Layout für eine Website erstellen bei der, der Content nur in einem Rechteck in der Mitte der Seite angezeigt wird. Jetzt habe ich schon ein paar Varianten mit Tabellen und Parent Div's ausprobiert, doch es klappt einfach nicht!

Hier mal mein Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title></title>
        <style type="text/css">
            <!--
            
            #parent
            {
            		position: absolute;
            		width: 100%;
            		height: 100%;
            		background-color: #999999;
								text-align: center;
								vertical-align: middle;
								border: 1px solid black;
            }
            #content
            {           		
                width: 700px;
                height: 500px;
                background-color:	white;
                border: 1px solid #b0cbe4;
            }
            
             -->
        </style> 
     </head>
     <body>
     		<div id="parent">
     			<div id="content">
     				&nbsp;
     			</div>
     		</div> 
     </body>
    </html>

Und damit erhalte ich immer das Ergebniss im angehängten Screenshot.

Was muss ich ändern, dass es funktioniert?

Maik · 5. Juli 2007

Hi,

setz mal dieses Stylesheet ein:

Code:

html,body {
height: 100%;
margin: 0;
padding: 0;
}

#parent {
position: relative;
width: 100%;
height: 100%;
background-color: #999999;
border: 1px solid black;
}

#content {
position: absolute;
left: 50%;
width: 700px;
margin-left: -350px; /* negative Hälfte von width:700px */
top: 50%;
height: 500px;
margin-top: -250px; /* negative Hälfte von height:500px */
background-color: white;
border: 1px solid #b0cbe4;
}

Mororu · 5. Juli 2007

Toll funktioniert perfekt. Vielen Dank.

Jetzt ist mir auch klar wie ich die Mitte berechnen kann.

Hast mir sehr viel weiter geholfen. Vielen Dank

✔ Div Element Zentrierung

Mororu

Mitglied

Anhänge

Maik

Mororu

Mitglied

Neue Beiträge