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

Posted 2023-03-05

【中文标题】如何在div中垂直居中文本？ [复制]

【英文标题】：How to center text vertically in div? [duplicate]

【发布时间】：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 的最常见问题之一，搜索一下会为您节省下一次郊游的时间！ ***.com/questions/489340/…

@martriay - 实际上我应该写“声誉”。相同的概念，不同的网站术语。

【参考方案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