如何在div中垂直居中文本？
这个问题在这里已经有了答案：
那么，我玩了一下jsFiddle，这就是我想到的：
http://jsfiddle.net/rVgkJ/7/
相关的CSS：
.small_wrapper_div{
width:100%;
display:table;
}
.small_wrapper_div > div{
display:table-cell;
vertical-align: middle;
}
.small_picture_div{
width:50px;
height:50px;
}
.small_picture_div img {
width:50px;
display:block;
}
.small_text_div{
padding-left:10px;
}
简而言之，您需要添加position: relative对于包含div（ small_wrapper_div ），然后您可以添加：
.small_text_div a {
display: table-cell;
vertical-align: middle;
text-align: left;
}
并将.small_text_div更改为以下组合：
.small_text_div {
height:100%;
padding-left:10px;
width:250px;
position: absolute;
left:50px;
top: 2px;
display: table;
}
而且你会让文字垂直居中。
嗨使用表，所以你可以很容易地垂直对齐
HTML
<table>
<tr>
<td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
<td>Talib Kweli – Push Thru (DJ Friendship Remix)</td>
</tr>
<tr>
<td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
<td>Talib Kweli – Push Thru (DJ Friendship Remix)</td>
</tr>
<tr>
<td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
<td>Talib Kweli – Push Thru <br />(DJ Friendship Remix)</td>
</tr>
</table>
CSS
table td.image img{
width:50px;
height:50px;
}
DEMO
链接地址: http://www.djcxy.com/p/41529.html