高さ 60px の要素があり、その中に画像やいくつかのスパンなどの他の要素があり、それらを高さ 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;
ましたが、うまくいきませんでした。