在按钮中垂直居中文本

Question

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

我已经尝试了几个小时来修复它，但到处都没有。

Chrome，mac OS X：

http://d.pr/i/c6Vt.jpg

Chrome，Windows 8

http://d.pr/i/rwXX.jpg

IE 10，Windows 8

http://d.pr/i/L7Jt.jpg

所以，是的。如果我设置了一个明确的高度，那么大块不会出现在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

Answer 2

离开：静止之后。 vertical-align to middle或explicit value（取决于svg / img中的实际箭头位置）。 white-space：nowrap到父框以保证安全，但不是必需的： http://codepen.io/gcyrillus/pen/vzrGj

Answer 3

这样的事情怎么样：

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应用于跨度。