CSS：如何将文本下移几个像素但保持背景不变？

Question

我有一些CSS按钮，当鼠标悬停在上面时会变得更大。我还使文本变得更大，但我想将文本向下移动几个像素，而不会影响使用的背景图像。

能否提供帮助？

我的代码如下：

<div id="nav">
    <a href="index.php">Home</a>
    <a id="headrush">Beer Bongs</a>
    <a id="thabto">Novelty</a>
</div>

#nav a {
    background: url(Images/Button.png);
    height: 28px;
    width: 130px;
    font-family: "Book Antiqua";
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    color: #C60;
    text-decoration: none;
    background-position: center;
    margin: auto;
    display: block;
    position: relative;
}

#nav a:hover {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 16px;
    text-align: center;
    color: #C60;
    text-decoration: none;
    margin: -3px;
    z-index: 2;
}

#nav a:active {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 14px;
    text-align: center;
    color: #862902;
    text-decoration: none;
    margin: 0 -3px;
    z-index: 2;
}

- Aaron

---

请在链接中添加 role="button"，这样浏览器会将它们视为按钮。 - Ryan B

Answer 1

使用 CSS 属性 line-height。

- jeffjenx

Answer 2

行高可以根据您的情况起作用。

行高的问题在于如果您有一个背景颜色，那么它也会扩展。

为了我正在做的某些事情，我嵌套了一些

元素。

我使用了position：relative; top：20px;

<div class="col-lg-11">
   <div style="position:relative; top:20px;">CR</div>     
</div>

这个内联样式仅仅是暂时的

- Tom Stickel

Answer 3

请使用以下样式来设置链接：

#nav a:link {
background: #ff00ff url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:12px;
text-align:center;
vertical-align:bottom;
color:#C60;
text-decoration:none;
background-position:center;
display:block;
position:relative;
}

在 :hover 和 :visited 中，仅定义您想要更改的内容（background、font-size 等）。

#nav a:hover {
    background: #f000f0 url(Images/Button%20Hover.png);
}

在您的代码中，链接具有不同的尺寸：
a - height:28px; width:130px;,
a:hover - height:34px; width:140px;,
a:visited - height:34px; width:140px;)。

这就是为什么您会得到不同的大小和位置（在a中使用了margin:auto-0px），但对于a:hover，边距已经改变，因此您的链接也会改变位置。

- miszczu

Answer 4

如果你想将文本向下移动，可以使用padding-top。

- Brian Warshaw

Answer 5

垂直对齐就可以解决问题

.text-to-align {
    vertical-align: bottom;
}

- Dr4kk0nnys