Div-Container in Div-Container mit 100% Höhe vertikal zentrieren

[falkost]

Hallo Forum,

ich habe das Problem, dass ich einen Div-Container. in dem eine ul-Liste mit Links liegt, nicht vertikal in Bezug zum umgebenden Div-Container zentriert bekomme.

Folgender HTML-Code:

<div class="block_default">
 <div class="sprachen">Sprache</div>
 <div class="mieter">
   <ul>
     <li>Link</li>
            <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
     <li>Link</li>
   </ul>
    </div>
</div>

Dabei ist die Menge der Links unbestimmt, so dass sich diese Box automatisch immer vertikal ausrichten sollte.

Dazu gehört derzeit noch folgender CSS-Code:

html {
 margin: 0px;
 padding: 0px;
 height: 100%;
 width: 100%;
}
body {
 margin: 0px;
 padding: 0px;
 height: 100%;
 width: 100%;
}
.block_default {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 text-transform: uppercase;
 color: #7780AA;
 text-decoration: none;
 background-color: #B1AECD;
 letter-spacing: 5px;
 height: 100%;
 min-height: 700px;
 width: 955px;
 background-repeat: no-repeat;
 background-position: center center;
 padding: 0px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: dashed;
 border-left-style: dashed;
 border-right-color: #959ABF;
 border-left-color: #959ABF;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border-top-style: none;
 border-bottom-style: none;
 background-image: url(../images/intro.gif);
 vertical-align: middle;
}
.block_default .sprachen {
 margin: 0px;
 padding: 20px;
 height: auto;
 width: 400px;
 float: left;
}
.block_default .mieter {
 padding: 20px;
 float: right;
 margin: 0px;
}
.block_default .mieter ul {
 padding: 0px;
 list-style-type: none;
 margin: 0px;
}
.block_default .mieter ul li {
 padding-top: 3px;
 padding-bottom: 3px;
}

Hat jemand eine Idee, wie man dies bewerkstelligen könnte ?

Versuche mit einer versteckten Box, welche bei 50%|50% absolut liegt, klappen nicht. Die umgebende Box muss schon 100% Höhe haben, damit das Hintergrundbild immer mittig ist.

VG
falkost

[Ingo Turski]

Hi,

Dabei ist die Menge der Links unbestimmt, so dass sich diese Box automatisch immer vertikal ausrichten sollte.

dazu bräuchtest Du 'vertical-align' - aber leider:
Applies to:   inline-level and 'table-cell' elements

Also keine Chance für ein DIV - jedenfalls nicht im IE, so dass Du nur eine richtige Tabelle verwenden könntest.

freundliche Grüße
Ingo

[ChrisB]

Hi,

Hat jemand eine Idee, wie man dies bewerkstelligen könnte ?

Vielleicht hilft dir das weiter:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

MfG ChrisB