✔ Div vertikal zentrieren

Radhad

Radhad

Erfahrenes Mitglied
Ich versuche derzeit ein div vertikal zu zentrieren, aber irgendwie bin ich zu blöd, das hinzukriegen ...
CSS: 
div.info {
	background: #CCCCCC url(../images/info.png) no-repeat 10px 10px;
	padding: 10px;
	padding-left: 65px;
	border: 1px solid #666666;
	min-height: 45px;
}

div.info div {
	color: #666666;
	font-weight: bold;
}

HTML: 
<div class="info"><div>Mein Hinweistext.</div></div>

Der Hinweistext kann eine odere mehrere Zeilen lang sein, wodurch line-height ausscheidet. auf den Text angewandt. WIe könnte ich denn nun das innere div vertikal zentrieren?
 
Zuletzt bearbeitet:
Ich versteh nicht ganz wie ich das bei einem Fließtext mit unterkriegen soll. Meine Versuche mit display: table & display: table-cell haben nicht im EInklang mit min-height funktioniert ...
 
Willst du den inneren <div>-Block, oder darin den Fließtext vertikal zentrieren?

Und in welchem Höhen-Kontext soll die vertikale Zentrierung stehen, wenn ein vertikaler Außen- und/oder Innenabstand beim Ausrichten nicht weiterhilft? Mit einer Angabe zur Mindesthöhe ist es meines Wissens so nicht möglich.

Achja, ist das da ein Tippfehler im Selektor "div.infor {}"? Oder wo findet sich im Markup das gleichnamige Element?

mfg Maik
 
"infor" ist ein Tippfehler, sollte "info" sein, sorry.

Also ich denke mal, das einfachste wäre doch eigentlich, den inneren div vertikal zu zentrieren. Ich nutze "min-height", weil sich die größe ändern soll, wenn mal viel Text dort vorhanden ist. Falls du eine andere Möglichkeit kennst, wäre mir das auch Recht.
 
Ohne eine Höhenangabe kannst du die vertikale Zentrierung nur über padding und/oder margin regeln.

mfg Maik
 
Ausgehend von dem empfohlenen Beispiel http://www.pmob.co.uk/temp/vertical-align11.htm:
Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
        height:200px; /* Von mir frei gewählt */
        width:100%;
        display:table;
        vertical-align:middle;
        border:1px solid red; /* Zur Visualierung der vertikalen Zentrierung */
}
#outer{
        display:table-cell;
        vertical-align:middle;
}
#formwrap{
        position:relative;
        left:50%;
        float:left;
}
#form1{
        border:1px solid #000;
        padding:20px 20px;
        position:relative;
        text-align:right;
        left:-50%;
}
p{margin:1em 0}
input{position:relative;background:#ffffcc}

</style>
<!--[if lt IE 8]>
<style type="text/css">
#wrapper{        overflow:hidden;/* stop hoz scroll bar from appearing*/}
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
        <div id="outer">
                <div id="formwrap">
                        <form id="form1" method="post" action="">
                                <p>
                                        <label for="t1">Name: </label>
                                        <input type="text" name="t1" id="t1" value="I'm in the middle" />
                                </p>
                                <p>
                                        <label for="t2">Password: </label>
                                        <input type="password" name="t2" id="t2" />
                                </p>
                        </form>
                </div>
        </div>
</div>
</body>
</html>


mfg Maik
 
Ok, jetzt sieht es schon besser aus, nur ein Problem habe ich noch: die Box ragt auf der rechten Seite aus der Seite raus bei width: 100%.

CSS: 
div.informationBox {
	background: #CCCCCC url(../images/info.png) no-repeat 10px 10px;
	margin: 10px;
	padding: 10px;
	padding-left: 65px;
	border: 1px solid #666666;
	height: 45px;
	display: table;
	vertical-align: middle;
}

div.informationBox div {
	color: #666666;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
}

Wie kann ich das noch in den Griff kriegen?

PS: den margin hab ich vorhin wohl gelöscht, soll natürlich ein wenig abstand zu den anderen Elementen haben.
 
Zuletzt bearbeitet:
Radhad hat gesagt.:
nur ein Problem habe ich noch: die Box ragt auf der rechten Seite aus der Seite raus bei width: 100%.
Zum Vergrößern anklicken....
Gemäß dem Box-Modell werden die festgelegten horizontalen Außen- und Innenabstände, sowie die Rahmenstärke zu dieser Eigenschaftsangabe hinzuaddiert, was für .informationBox eine tatsächliche Boxenbreite von "100% + 3*10px + 65px + 2*1px" ergibt, und vom Browser entsprechend breiter dargestellt wird.

Um diesen Konflikt zu vermeiden, und für .informationBox die erforderliche relative Breitenangabe nutzen zu können, damit sich die Boxenbreite (bedingt durch display:table) dem Elternelement angleicht, könntest du die angesprochenen CSS-Deklarationen im Markup geschickt aufteilen:
HTML: 
<div class="marginWrapper">
     <div class="informationBox">
          <div>Mein Hinweistext.</div>
     </div>
</div>
CSS: 
div.marginWrapper {
    margin: 10px;
    border: 1px solid #666666;
    height: 1%;
}

div.informationBox {
    background: #CCCCCC url(../images/info.png) no-repeat 10px 10px;
    width: 100%;
    height: 45px;
    display: table;
    vertical-align: middle;
}

div.informationBox div {
    color: #666666;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    padding-left: 65px;
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück