如何在div中垂直居中文本？ [复制]答案

【问题标题】：How to center text vertically in div? [duplicate]如何在div中垂直居中文本？ [复制]
【发布时间】：2013-02-15 12:16:16
【问题描述】：

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

这是我的jsfiddle

【问题讨论】：

与其将其中包含的数据复制到响应中，为了甜蜜，甜蜜的业力，我将简单地给你链接：css-tricks.com/vertically-center-multi-lined-text
将您的数据/文本包装在一个 div 中。给那个 div 一个行高。
@Stuart 业力？你能解释一下吗？
这是关于 SO 的最常见问题之一，搜索一下会为您节省下一次郊游的时间！ stackoverflow.com/questions/489340/…
@martriay - 实际上我应该写“声誉”。相同的概念，不同的网站术语。

标签： html css layout alignment

【解决方案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;
}

【讨论】：

【解决方案2】：

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

你会让文本垂直居中。

【讨论】：

【解决方案3】：

您可以使用表格，这样您就可以轻松地将其垂直对齐

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

【讨论】：