1

我希望我的按钮在 HTML 中看起来像这样：

<a href="page.html" class="button">Link</a>

按钮类如下：

.button { background:url("button_bg.png"); height:33px; display:inline-block; font-size:18px; }
.button:before { display:inline-block; content:""; width:23px; height:33px; background:url("button_before.png"); }
.button:after { display:inline-block; content:""; width:23px; height:33px; background:url("button_after.png"); }

但是，我遇到了两个问题：

  1. 我想“之前”和“之后”只显示他们自己的背景。他们目前在“按钮”类的顶部显示他们的背景。
  2. 文本在底部对齐。我想知道将其集中对齐的最佳方法。考虑到我知道按钮的高度，我确信这在 CSS 中是可能的，但我也在为此苦苦挣扎。

还有一件事需要注意：我希望“之前”和“之后”成为超链接的一部分。我确信可以使用 DIV 来显示这些“之前”和“之后”图像，但它会使它们与超链接分开。

4

1 回答 1

0

您可以这样做以将这些图像添加为超链接的一部分

示例 HTML

<a href="#">
<i class="first-image"></i> /**USE BACKGROUND IMAGE HERE**/
<span class="link-text"></span>
<i class="second-image"></i> /** USE BACKGROUND IMAGE HERE**/
</a>

对于垂直居中文本，

height:33px;在标签上使用并设置其display:inline-block; 和line-height:33px;

于 2012-07-15T18:45:22.420 回答