如何在div中垂直居中文本?

时间:2013-03-01 03:54:50

标签: html css css3 layout alignment

我知道您可以通过设置line-height一行来完成,但我的数据可能占用多行。我尝试为父母设置display:table,为孩子设置display:table-cell,但我无法让它工作。

这是我的jsfiddle

3 个答案:

答案 0 :(得分:1)

好吧,我和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;
}

答案 1 :(得分:1)

简而言之,您需要将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; 
}

您将文本垂直居中。

答案 2 :(得分:0)

使用表格,以便您可以轻松地垂直对齐

HTML

<table>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli &#8211; 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 &#8211; 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