如何在具有视口单位的 div 中居中文本？

Posted 2023-03-06

【中文标题】如何在具有视口单位的 div 中居中文本？

【英文标题】：How can I center text in a div with viewport units?

【发布时间】：2017-02-08 12:17:09

【问题描述】：

当使用像素单位时，我可以毫无问题地对齐文本。但是对于视口单元，我无法到达任何地方。这是我的代码。

#aboutMeTitle 
  height: 10vh;
  background-color: #BEA69B;
  display: block;

#aboutMeTitle p 
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
  text-transform: uppercase;
  letter-spacing: 0.2em;
  vertical-align: middle;
  text-align: center;

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
</div>

【问题讨论】：

display: inline-block; 在段落中可能不是是你想要的。

【参考方案1】：

使用 CSS flexbox 非常简单：

#aboutMeTitle 
  display: flex;
  justify-content: center;  /* center p horizontally */
  align-items: center;      /* center p vertically */
  height: 10vh;
  background-color: #BEA69B;

#aboutMeTitle p 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
 </div>

浏览器支持： 所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。更多细节在this answer。

【讨论】：

这也有效。我应用了一个'line-height:10vh'，这成功了，但弹性盒子也做了同样的事情。我只是想知道哪种技术得到更广泛的支持？

您已经在使用视口百分比单位。所以你可以安全地使用 flexbox。两者都是尖端的 CSS3 技术。就哪个得到更广泛的支持而言，那就是 flexbox（参见 caniuse.com）。

【参考方案2】：

要使 vertical-align:middle 工作，必须将父级设置为 display:table-cell html

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS

#aboutMeTitle 
height: 10vh;
background-color: #BEA69B;
display:block;
display:table-cell;


#aboutMeTitle p 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
text-transform: uppercase;
letter-spacing: 0.2em;
vertical-align:middle;
text-align:center;

【讨论】：

修复了 text-align 属性恢复正常，使其水平居中。但是我不能让它垂直居中。通常我只是将行高设置为与 div 相同的值，但您不能将行高设置为视口单位；或者如果可以的话，我不知道这样做的技巧。有什么见解吗？

对不起，我的标题用错了。我的主要问题是垂直对齐，而不是文本的水平对齐。

【参考方案3】：

您刚刚删除了#aboutMeTitle p 中的display: inline-block，并添加了line-height: 10vh; 以使文本居中垂直。

HTML 代码：

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS 代码：

#aboutMeTitle 
    height: 10vh;
    background-color: #BEA69B;
    display: block;

#aboutMeTitle p 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
    text-transform: uppercase;
    letter-spacing: 0.2em;
    vertical-align:middle;
    line-height: 10vh;
    text-align:center;

JSFIDDLE DEMO

【参考方案4】：

我觉得自己真的很愚蠢，我很抱歉打扰到任何人。希望这个答案可以帮助其他人。我在 4 小时的睡眠中加倍工作，现在我正在做一个个人项目。无论如何，您可以使用视口单位应用 line-height 属性，我只需要对其进行硬编码，因为它不是 DW CSS 面板中的选项。

这是固定的 CSS

#aboutMeTitle 
    height: 10vh;
    background-color: #BEA69B;
    display: block;

#aboutMeTitle p 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
    text-transform: uppercase;
    letter-spacing: 0.2em;
    vertical-align: middle;
    text-align: center;
    line-height: 10vh;