如何使div中的文本垂直居中？

Posted 2023-03-05

【中文标题】如何使div中的文本垂直居中？

【英文标题】：How to center text in a div vertically?

【发布时间】：2014-07-06 20:28:13

【问题描述】：

我已将 div 中的文本居中，但我只能通过使用 text-align: center 将其水平居中 但是，我无法将文本垂直居中。我试过使用vertical-align: middle;，但没有用

这是一个代码笔：http://codepen.io/anon/pen/Ioiaq

带有文本的代码就在 html 面板的底部，文本是“INFO”

这是目前为止的代码：

<div id="inf" style="
                     text-align:center;  
                     background-color: white; 
                     position: absolute; top:50%; left: 45%; width: 10%; height: 6%; 
                     z-index: 10;  
                     display: inline-block;">

  <a href="#"><span>INFO</span></a>
  </div>

有什么想法吗？

我不介意用什么代码来修复对齐，它不必是 css。

【问题讨论】：

仅使用 CSS 您可以使用正确的高度和填充组合。否则就是 JS 工作。

这个人也有问题，但它仍然可以工作：***.com/questions/2939914/…

@leanyo martinet JS 可以用

【参考方案1】：

line-height 和 vertical-align: middle; 如果您不使用 JS，可能是最好的方法。

FIDDLE

HTML：

<div id="inf">
    <a href="#"><span>INFO</span></a>
</div>

CSS：

#inf  
    text-align:center;  
    background-color: white; 
    z-index: 10;  
    display: inline-block;
    width: 100%;
    line-height: 400px;
    vertical-align: middle;

【讨论】：

我不介意使用 JS 来实现我正在寻找的东西 :-)

JS 很好，但作为一般规则，我会尝试坚持使用 CSS 进行布局；）我认为 mr.musicman 示例应该适合您。

【参考方案2】：

您可以使用 CSS 属性 vertical-align。

vertical-align: middle;

【参考方案3】：

要使单行垂直居中，您可以使用 CSS line-height ，其值与您使用的高度值相同。