将文本置于按钮中心应该很简单。不幸的是，在不同的浏览器和平台上，我得到的结果不同。
我已经尝试了几个小时来修复它，但到处都没有。
所以，是的。如果我设置了一个明确的高度，那么大块不会出现在IE中，但是我不知道它为什么会在一开始就崩溃。
以下是代码：
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
和HTML（非常简单）：
<a href="about.html" class="btn-call-to-action">Want more ?</a>
和网站：http://aurelieremia.be/tfa/
//编辑：我想我明白了。仍然没有在窗口中居，但通过重置线高，按钮看起来更正常。 IE问题解决后，我会尝试使用背景图片（感谢Ana）
答案 0 :(得分：1)
我不确定这是否会有所帮助，但是在css中跨浏览器居中是一件很大的痛苦，所以我使用Twitter Bootstrap并覆盖了一些类。
如果这听起来像你认为你可以查看解决方案here
答案 1 :(得分：0)
离开：静止之后。 vertical-align to middle或explicit value（取决于svg / img中的实际箭头位置）。 white-space：nowrap到父框以保证安全，但不是必需的： http://codepen.io/gcyrillus/pen/vzrGj
答案 2 :(得分：0)
这样的事情怎么样：
HTML：
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS：
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
在这里小提琴：http://jsfiddle.net/MQHVE/3/
这里的重要部分是让包装器（a标签）显示：table和content（span）display：table-cell。然后，您可以将vertical-align：middle应用于跨度。