无论字体系列或字体大小如何，有没有办法使文本垂直居中？

Posted 2023-03-05

【中文标题】无论字体系列或字体大小如何，有没有办法使文本垂直居中？

【英文标题】：Is there a way to center a text vertically regardless of font-family or font-size?

【发布时间】：2018-07-16 15:44:26

【问题描述】：

我正在寻找一种与字体无关的方式来使 div 中的文本居中。我有一个按钮样式的固定高度 div。我想将文本垂直居中（仅一行）。问题是当我更改字体系列时，某些字体不会垂直居中。有没有办法根据字体度量计算所需的行高？

【问题讨论】：

你能举个例子吗？

请展示您目前拥有的内容，这样人们就不必浪费时间发布您已经尝试过的答案了。

【参考方案1】：

试试这个解决方案，希望它对你有用。

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

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

【参考方案2】：

你可以设置line-height等于按钮的高度。

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

<div>Button</div>

【讨论】：

这不适用于所有字体。有些字体的构建方式不同，并且不居中。

【参考方案3】：

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

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;

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

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