我正在寻找一种以字体为中心的文本在div中居中的方式。我有一个按钮样式固定高度div。我希望将文本中心(仅一行)垂直居中。问题是,当我更改font-family时,某些字体不会垂直居中。有没有办法根据字体指标计算所需的线高度?
答案 0 :(得分:1)
尝试此解决方案,希望它适合您。
.content{
align-items: center;
display: flex;
justify-content: center;
height: 150px;
}

<div class="content">
<span>Hello world</span>
</div>
&#13;
答案 1 :(得分:0)
试试这个,我不使用行高:
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
。
答案 2 :(得分:-1)
您可以将line-height
设置为等于按钮的高度。
div {
height: 50px;
line-height: 50px;
border: 1px solid;
}
&#13;
<div>Button</div>
&#13;