html - 在按钮中垂直居中文本

Question

在按钮中居中文本应该很简单。不幸的是，在不同的浏览器和平台上，我得到了不同的结果。

我已经尝试了几个小时来修复它，但没有任何效果。

Chrome、Mac OS X:

_{(来源:d.pr)}

Chrome、Windows 8

_{(来源:d.pr)}

IE 10、Windows 8

_{(来源:d.pr)}

所以，是的。如果我设置一个定义的高度，大块不会出现在 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)

Answer 1

我不确定这是否有帮助，但在 css 中跨浏览器居中是一个很大的痛苦所以我使用 Twitter Bootstrap并覆盖一些类。

如果这听起来像是您考虑的事情，您可以查看解决方案 here