在按钮上居中文本答案

【问题标题】：Center Text on a Button在按钮上居中文本
【发布时间】：2011-11-23 22:52:06
【问题描述】：

我知道这已经被问过几次了，但在这种情况下似乎没有一个解决方案有效。基本上，我希望“播放”一词在此按钮上垂直和水平居中。在水平方向上，文本会自行运行，但在垂直方向上，无论我尝试什么，它总是比它应该的低一点，在我测试它的所有浏览器中。有没有人有什么建议？谢谢

<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}

button:hover {
cursor: pointer;
}

button::-moz-focus-inner /*Remove button padding in FF*/
{ 
border: 0;
padding: 0;
}


.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;

}


</style>
<button type="button" class="start">play</button>

【问题讨论】：

只是因为文本是小写的。 jsfiddle.net/TYZX4/1
好地方，虽然我刚刚在photoshop上测量过，大写版本仍然不在精确的中心。可能是我太挑剔了……
是的，那么在那一点上，你唯一能做的就是使用类似padding: 5px 10px 10px 10px; jsfiddle.net/TYZX4/2

标签： css button center

【解决方案1】：

.start 上的padding 可能是您必须使用的，虽然它的设置方式应该是居中的，但您可以将其分解为padding: 8px 10px 10px 10px; 之类的东西

您也可以检查并设置 .start 下的line-height 看看是否有帮助。

【讨论】：

默认居中似乎不够精确，所以虽然没有那么优雅，但这种方法确实可以完成工作。谢谢！

【解决方案2】：

vertical-align 的正确值是 middle，而不是 center。但是我不确定这是否会有所作为，因为它可能只会影响按钮本身相对于周围文本垂直对齐的位置。我很确定按钮文本默认是垂直居中的，不过...

【讨论】：