Div vertikal zentrieren @ tutorials.de: Tutorials, Forum & Hilfe

Radhad · 28.08.09 12:55

Ich versuche derzeit ein div vertikal zu zentrieren, aber irgendwie bin ich zu blöd, das hinzukriegen ...

Code 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-Code:

<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?

Maik · 28.08.09 12:57

Hi,

dies funktioniert über die Tabelleneigenschaften der display-Eigenschaft in Verbindung mit vertical-align:middle.

Ein Beispiel incl. IE-Workaround bzgl. der mangelhaften Unterstützung dieser display-Tabellenwerte gibt es hier: http://www.pmob.co.uk/temp/vertical-align11.htm

mfg Maik

Radhad · 28.08.09 13:04

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 ...

Maik · 28.08.09 13:21

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

Radhad · 28.08.09 14:37

"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.

Maik · 28.08.09 14:45

Ohne eine Höhenangabe kannst du die vertikale Zentrierung nur über padding und/oder margin regeln.

mfg Maik

Radhad · 28.08.09 14:47

Ok, und wenn ich von min-height auf height wechsel?

Maik · 28.08.09 14:52

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{
        [b]height:200px;[/b] /* Von mir frei gewählt */
        width:100%;
        display:table;
        vertical-align:middle;
        [b]border:1px solid red;[/b] /* 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

Radhad · 28.08.09 15:40

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%.

Code 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.

Maik · 28.08.09 17:05

Zitat von Radhad

nur ein Problem habe ich noch: die Box ragt auf der rechten Seite aus der Seite raus bei width: 100%.

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-Code:

<div class="marginWrapper">
     <div class="informationBox">
          <div>Mein Hinweistext.</div>
     </div>
</div>

Code 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

Radhad · 31.08.09 10:57

Super, vielen Dank, jetzt klappt es wunderbar

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

div vertikal zentrieren die 2te

Div im Div vertikal zentrieren

Div Inhalt Vertikal zentrieren

div vertikal zentrieren

Im DIV Tag vertikal zentrieren

E-Mail:

Abonnieren Abbestellen