使用CSS垂直对齐元素

Question

我有一个高60像素的元素,其中包含其他元素,如图像和几个跨度,我无法让它们在60px高元素内垂直对齐.这是模型和CSS:

<div class="member">
    <img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
    <span class="name"><a href="">John Smith</a></span>
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>

#sidebar .member {
    height: 60px;
    margin-bottom: 10px;
    vertical-align: center;
}

#sidebar .member .name {
    font-size: 15px;
    font-weight: bold;
}

#sidebar .member .pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

#sidebar .member .skills {
    display: block;
    font-size: 12px;
    overflow: hidden;
}

我把它放在了jsfiddle:http://jsfiddle.net/CYFyx/2/

如您所见,元素中的.member元素向上推.我需要它们垂直对齐,如下所示:

已经尝试vertical-align: middle;但没有运气.

Answer 1

您只能vertical-align: middle在td表格布局中使用.所以你必须在跨度上添加一个div

<div class="cell">
    <span class="name"><a href="">John Smith</a></span>
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>   

有这个属性

#sidebar .member .cell {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}

你可以在这里测试一下:http://jsfiddle.net/Tn2RU/