I was searching for that stuff some years ago, but there was no option to center a div in the body verticaly in those times.
But know there is a nice solution, at least a solution, to make this formating.
I had tome hints from here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Verticaly and horizontaly centering</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html {
overflow: hidden;
}
body {
text-align: center; /*horizontal center in IE*/
}
body[id] {
display: table;
}
#table {
position: absolute;
top: 50%;
left: 50%;
}
#table[id] {
position: static;
display: table-cell;
vertical-align: middle;
}
#cell {
text-align: left;
background: #9f9;
position: relative;
top: -50%;
left: -50%;
height: 300px;
width: 500px;
overflow: auto;
margin: 0 auto 0 auto;
padding: 0.5em;
}
#cell[id] {
position: static;
}
</style>
</head>
<body id="body">
<div id="table">
<div id="cell">
<p>The div box with the green background ist now centered verticaly and horizontaly in IE lte 6 and Firefox<br/>
The css definition like <b>body[id]</b> mean: every body element with an id attribute.<br/>
This will not be interpreted by the IE lte 6, so we can use this syntax to make different definition for IE, and the rest of the browsers.
<br/>
And if we put some more text in this div, we will have a scroll bar just for this one.<br/>
I also added some padding to this div, just to look a little better.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen