使用border-image / border-width时居中的内容

Question

我正在尝试创建一个样式化的按钮，其中包含一个单个字符。

我正在使用“border-image”和“border-width”创建一个按钮，我可以扩展到更大的内容（在这个简化的场景中，这种能力已经丢失了......）。

我的问题是：当按钮很小时（具体来说，当按钮的宽度超过2 *时），内容不会居中。我试过'常规'像margin: 0 auto;这样的技术但似乎没有任何乐趣。使用没有这些边框属性的dumb-button类，我可以得到我想要的东西（见下文）

这巧妙地证明了这个问题。我希望角色以样式按钮为中心：

http://jsfiddle.net/rjmLy/

（适用于Chrome / Safari，仅适用于Webkit） （来自http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo的主题按钮的示例）

我的CSS如下：

.fancy-button {
    border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
    border-width: 0 14px;
    box-sizing: border-box;
    font-size: 16px;
    height: 37px;
    line-height:37px;
    text-align: center;
    margin: 0 auto;
    width: 28px;
}
.centerme {
    position:relative;
    margin:0 auto;
}
.dumb-button {
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    width: 28px;
    background-color: red;
    margin: 0 auto;
}

HTML看起来像这样。 centerme课程试图尝试将新div置于旧形状的顶部。它对我不起作用。 dumb-button版本看起来正确（但很无聊......）

<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>

<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>

非常感谢任何帮助。

Answer 1

您正在使用CSS3 Sprite和border-image属性构建按钮，其中按钮左侧的开头宽度为14px，按钮右侧的开头宽度为14px。

在你的CSS中你将按钮的宽度设置为28px：问题是，这为你放在按钮中间的任何文本留下了空间，因此字母重叠在边框图像的一部分上。

为了解决此问题，您只需将按钮的width增加到大约42px或更大。

.fancy-button {
  border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
  border-width: 0 14px;
  box-sizing: border-box;
  font-size: 16px;
  height: 37px;
  line-height:37px;
  text-align: center;
  margin: 0 auto;
  width: 42px;
}

这是一个工作小提琴：http://jsfiddle.net/QYrzS/

但是，如果你真的想保持图像那么小 - 事情就更难了。一种选择是将每个按钮的内容（单个字母）包装在<div>中，然后手动设置每个按钮的边距。例如：

HTML

<div class="fancy-button"><div class="centerme">W</div></div>

CSS

.centerme {
  margin-left:-7px;
}

这是一种hacky，需要手动调整（因为每个字母的宽度不同）。

这是一个有效的演示：http://jsfiddle.net/rjmLy/

请注意，i字母不居中。您需要为持有该字母的个人<div>指定正确的保证金，以便解决该问题。