Hallo,
ich habe folgende betroffene Quelltexte:

HTML-Code:

.member_wrapper{
    width: 540px;
    height: 100px;
    margin-top: 15px;
    padding: 5px;
    border: #880000 solid 1px;
}
.member_pic{
    width: 100px;
    height: 100px;
    background: url(sys_pics/nopic.jpg);
    float: left;
}
.member_info{
    position: relative;
    width: 425px;
    float: right;
    margin-top: auto;
    margin-bottom: auto;
}
.member_name{
    width: 425px;
}
.member_messenger{
    width: 425px;
}
.member_bike{
    width: 425px;
}

.member_info:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

in

HTML-Code:

<div class="member_wrapper">
<div class="member_pic">
</div>
<div class="member_info">
<div class="member_name">
Dennis 'hubbl' Otto
</div>
<div class="member_bike">
Bike: <i>keine Beschreibung</i></div>
<div class="member_messenger">
<img src="sys_pics/icq_icon.jpg" width="20" height="20" alt="Icq">276345584<img src="sys_pics/msn_icon.jpg" width="20" height="20" alt="Msn">mail@mail.de</div>
</div>
</div>

Wie bekomme ich das div "member_info" (in dem Befinden sich die drei anderen divs für name, beschreibung und messenger) vertikal zentriert?

Gruß Dennis

Hi,

hierfür müsste das Element eine Höhe besitzen, um es im Anzeigebereich vertikal zentriert positionieren zu können - beispielsweise:

Code :

1 2 3 4 5 6 7 8

.member_info{     position: relative;     width: 425px;     float: right;     margin-top: -30px;     height: 60px;     top: 50%; }

oder:

Code :

1 2 3 4 5 6 7 8

.member_info{     position: relative;     width: 425px;     float: right;     margin-top: -2em;     height: 4em;     top: 50%; }