按钮上的中心文本

我知道这已被问过几次，但不是解决方案似乎在这种情况下工作。基本上，我希望“play”这个词在这个按钮上垂直和水平居中。横向上，文本自身表现出来，但是垂直方向，无论我尝试什么，它都是总是比我应该测试的所有浏览器都低一点。有没有人有什么建议？由于按钮上的中心文本

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

来源

2011-09-23 Lars

这只是因为文本是小写。 http://jsfiddle.net/TYZX4/1/ –

不错的地方，虽然我刚刚在photoshop上测量过，大写版本仍然不在正中。也许我太挑剔了...... – Lars

是的，那么在那个时候，你唯一能做的就是用 'padding：5px 10px 10px 10px;'http://jsfiddle.net/TYZX4/2/ –

.startart上的padding很可能是你必须去玩的，虽然它的设置方式，它应该集中它，但你可以将它分解为padding: 8px 10px 10px 10px;

你也可以在.start下检查并设置line-height，看看它是否有帮助。

来源

2011-09-23 20:11:22

看起来默认的对中不够精确，虽然不够精美，但这种方法当然可以完成工作。谢谢！ – Lars

正确的价值vertical-align是middle，不center。不过，我不确定这是否会有所作为，因为它可能会影响按钮本身垂直对齐周围文本的位置。我敢肯定，按钮文本默认情况下是垂直居中，尽管...

来源

2011-09-23 20:03:21

按钮上的中心文本

回答

相关问题