有没有办法垂直居中文本而不管font-family或font-size?

时间:2018-02-06 14:31:26

标签: css vertical-alignment webfonts

我正在寻找一种以字体为中心的文本在div中居中的方式。我有一个按钮样式固定高度div。我希望将文本中心(仅一行)垂直居中。问题是,当我更改font-family时,某些字体不会垂直居中。有没有办法根据字体指标计算所需的线高度?

3 个答案:

答案 0 :(得分:1)

尝试此解决方案,希望它适合您。



.content{
    align-items: center;
    display: flex;
    justify-content: center;
    height: 150px;
}

<div class="content">
  <span>Hello world</span>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个,我不使用行高:

&#13;
&#13;
button {
  height: 40px;
  display: table;
}

button>span {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

button.one {
  font-family: "Helvetica Neue";
  font-size: 30px;
}

button.two {
  font-family: sans-serif;
  font-size: 18px;
}

button.three {
  font-family: Helvetica;
  font-size: 18px; 
}

button.four {
  font-family: Arial;
  font-size: 20px;
}

button.five {
  font-family: Times New Roman;
  font-size: 30px;
}
&#13;
<button class="one"><span>text</span></button>
<br>
<br>
<button class="two"><span>text</span></button>
<br>
<br>
<button class="three"><span>text</span></button>
<br>
<br>
<button class="four"><span>text</span></button>
<br>
<br>
<button class="five"><span>text</span></button>
&#13;
&#13;
&#13;

如果文本size扩展了按钮的高度,那么你将得到一个应该是obvios的失败结果,因为按钮的高度为fixed

答案 2 :(得分:-1)

您可以将line-height设置为等于按钮的高度。

&#13;
&#13;
div {
    height: 50px;
    line-height: 50px;
    
    border: 1px solid;
}
&#13;
<div>Button</div>
&#13;
&#13;
&#13;