3

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

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

铬，Mac OS X：


（来源：d.pr）

铬，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）

4

3 回答 3

1

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

如果这听起来像是您认为的事情，您可以在此处查看解决方案

于 2013-06-08T21:30:26.603 回答
0

离开 :after 在 static 。垂直对齐到中间值或显式值（取决于 svg/img 中箭头的实际位置）。white-space:nowrap 到父框以保护，但不是必需的： http ://codepen.io/gcyrillus/pen/vzrGj

于 2013-06-08T13:44:06.590 回答
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 标记）显示：表和内容（跨度）显示：表单元。然后您可以将 vertical-align:middle 应用于跨度。

于 2013-06-08T22:13:28.737 回答