In der Rubrik Knowledge Base hatten wir das Thema schon. Jetzt habe ich friccas Methode genommen und in den mittigen Container noch 4 divs gepackt. 2 sollen oben und die anderen 2 unten zentriert werden.
Wenn ich bei den Boxen das float: left rausnehme, zentriert er es mir zwar auch, aber stellt alle Boxen untereinander dar. Wenn ich float: left reinnehme, stellt er mir 2 Boxen oben und 2 Boxen unten dar, aber nicht mehr zentriert. Wie kann ich das jetzt so hinbekommen, dass die trotzdem zentriert werden? Und auch das h1 in der Mitte beim IE? Im Firefox stellt er mir die h1 zentriert da, im IE nicht...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html,body
{
height: 100%;
}
body
{
color: #630;
font: 100.01%/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
background: #fc6;
}
#distance
{
width: 1px;
height: 50%;
margin-bottom: -235px;
float: left;
}
#container
{
position: relative;
text-align: center;
height: 470px;
width: 100%;
clear: left;
margin: 0 auto;
}
h1
{
font-size: 120%;
text-align: center;
}
#box1, #box2, #box3, #box4
{
overflow: hidden;
position: relative;
border: 10px solid #fff;
height: 200px;
width: 44%;
color: #fff;
margin: 1%;
float: left;
}
#box1[id], #box2[id], #box3[id], #box4[id]
{
display: table;
position: static;
text-align: center;
}
#middle
{
position: absolute;
top: 50%;
} /* für den IE */
#middle[id]
{
display: table-cell;
vertical-align: middle;
position: static;
}
#inner
{
text-align: center;
position: relative;
top: -50%;
} /* für den IE */
/* optional: #inner[id] {position: static;} */
#box1
{
background-color: #D92C80;
}
#box2
{
background-color: #00A0E3;
}
#box3
{
background-color: #FFE96B;
}
#box4
{
background-color: #2B7C33;
}
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<div id="box1">
<div id="middle">
<div id="inner">
<h1>Box 1</h1>
</div>
</div>
</div>
<div id="box2">
<div id="middle">
<div id="inner">
<h1>Box 2</h1>
</div>
</div>
</div>
<div id="box3">
<div id="middle">
<div id="inner">
<h1>Box 3</h1>
</div>
</div>
</div>
<div id="box4">
<div id="middle">
<div id="inner">
<h1>Box 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>