Question

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

Answer 1

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

＆＃13;

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

＆＃13;

<div class="content">
  <span>Hello world</span>
</div>

＆＃13;

Answer 2

试试这个，我不使用行高：

＆＃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;

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

Answer 3

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

＆＃13;

div {
    height: 50px;
    line-height: 50px;
    
    border: 1px solid;
}

＆＃13;

<div>Button</div>

＆＃13;

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

3 个答案: