1

我正在尝试创建一个样式按钮，其中有一个以单个字符为中心的按钮。

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

我的问题是：当按钮很小时（特别是当按钮略大于 2*border-width 时），内容不居中。我已经尝试过“传统”技术，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;
}

​</p>

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>

任何帮助将不胜感激。

4

1 回答 1

2

您正在使用 CSS3 Sprite 和一个border-image属性构建按钮，其中按钮左侧的起点为 14px 宽，而按钮右侧的起点为 14px 宽。

CSS3 边框图像

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

为了解决这个问题，您可以简单地width将按钮的大小增加到大约 42 像素或更大。

.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/

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

HTML

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

CSS

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

这有点老套，需要手动调整（因为每个字母的宽度不同）。

这是一个工作演示：http: //jsfiddle.net/rjmLy/

请注意，字母i没有居中。您需要为<div>持有该信件的个人指定正确的边距才能解决此问题。

于 2012-09-13T05:08:55.590 回答