Question

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 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>

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

中的更多详细信息

Answer 2

对于vertical-align：middle to work，父级必须设置为display：table-cell HTML

#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;
}

CSS

beforeSend

Answer 3

您刚刚在display: inline-block中删除了#aboutMeTitle p，并添加了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

Answer 4

我感到非常愚蠢，我为打扰任何人而道歉。希望这个答案可以帮助别人。我在睡了4个小时后工作了一倍，现在我正在做个人项目。无论如何，你可以使用视口单元应用行高属性，我只需要硬编码，因为它不是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;
}

如何将div中的文本居中与视口单元？

4 个答案: