✔ <div> Inhalt vertikal zentrieren?
- Themenstarter Lorag
- Beginndatum
- Status
Ich habe leider dasselbe Problem. Ich such nun schon seit 2 Tagen im Netz und auch hier im Forum nach einer Lösung.
Ich habe einen div Container, in welchem ein weiterer div Container eingebettet ist. Ersterer befindet sich nicht exakt mittig auf der Page, auch wenn es bei manchen Auflösungen so aussieht. Mein Problem ist, dass ich den 2.Container sowohl horizontal (bereits gelöst) als auch vertikal innerhalb des 1.Containers zentriert haben möchte.
Hier mal mein Code:
Wie schaffe ich es jetzt, dass der 2.Container (Mainframe) auch noch vertikal innerhalb vom 1.Container (Mainframe_Background) zentriert wird?
P.S.: Die Hintergrundfarben blau und orange hab ich zum testen hinzugefügt, da man so sehr schön sieht, wo exakt sich die Container befinden.
Ich habe einen div Container, in welchem ein weiterer div Container eingebettet ist. Ersterer befindet sich nicht exakt mittig auf der Page, auch wenn es bei manchen Auflösungen so aussieht. Mein Problem ist, dass ich den 2.Container sowohl horizontal (bereits gelöst) als auch vertikal innerhalb des 1.Containers zentriert haben möchte.
Hier mal mein Code:
Code:
body {
margin:0px;
padding:0px;
background-image: url(gfx/bg_totenkoepfe12.jpg);
}
#Banner {
margin:1% 0px;
width:100%;
padding:0px;
text-align:center;
}
#Navigation {
margin:1% 0px;
width:100%;
padding:0px;
}
#Mainframe_Background {
margin:0px 10%;
width:80%;
height:76%;
padding:0px;
background-image: url(gfx/mainframe.png);
background-position:center;
background-repeat:no-repeat;
background-color:blue;
}
#Mainframe {
width: 750px;
height: 380px;
padding:0px;
text-align:left;
color:black;
background-color:orange;
}
</style>
</head>
<body>
<div id="Banner">
<?php
include('banner.php');
?>
</div>
<div id="Navigation">
<?php
include('navi.php');
?>
</div>
<div align="center" id="Mainframe_Background">
<div id="Mainframe">
</div>
</div>
</body>
</html>Wie schaffe ich es jetzt, dass der 2.Container (Mainframe) auch noch vertikal innerhalb vom 1.Container (Mainframe_Background) zentriert wird?
P.S.: Die Hintergrundfarben blau und orange hab ich zum testen hinzugefügt, da man so sehr schön sieht, wo exakt sich die Container befinden.
M
Maik
Hi,
versuch es mal mit den folgenden Regelerweiterungen:
Das HTML-Attribut align=center wird hiermit nicht mehr benötigt.
versuch es mal mit den folgenden Regelerweiterungen:
Code:
html,body {
height:100%;
}
#Mainframe_Background {
margin:0px 10%;
width:80%;
height:76%;
padding:0px;
background-image: url(gfx/mainframe.png);
background-position:center;
background-repeat:no-repeat;
background-color:blue;
position:relative;
}
#Mainframe {
width: 750px;
height: 380px;
padding:0px;
text-align:left;
color:black;
background-color:orange;
position:absolute;
left:50%;
margin-left:-375px; /* negative Hälfte von width:750px */
top:50%;
margin-top:-190px; /* negative Hälfte von height:380px */
}Ich habe mal ein Screenshot zum besseren Verständnis angehangen.
Der orange Container soll innerhalb des blauen genau mittig sitzen, muss also noch vertikal zentriert werden, so dass er über dem dahinter befindlichen Bild (background-position:center;
background-repeat:no-repeat
mittig sitzt. Das Ganze muss jedoch für eine beliebige Auflösung funktionieren, so dass ich nicht mit absoluten Angaben arbeiten kann.
Ich bin für jede "unsaubere Krücke" dankbar. Hauptsache es funktioniert.
TIA!
Der orange Container soll innerhalb des blauen genau mittig sitzen, muss also noch vertikal zentriert werden, so dass er über dem dahinter befindlichen Bild (background-position:center;
background-repeat:no-repeat
mittig sitzt. Das Ganze muss jedoch für eine beliebige Auflösung funktionieren, so dass ich nicht mit absoluten Angaben arbeiten kann.Ich bin für jede "unsaubere Krücke" dankbar. Hauptsache es funktioniert.
TIA!
Anhänge
M
Maik
Ich hab schon verstanden, wie du dir das vorstellst.
- Status
