Question

我有一些CSS按钮在悬停时更大。我也把文字做得更大但是我想把文字向下移动几个px而不会弄乱使用的背景图像。

帮助？

我的代码如下：

<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;
}

Answer 1

使用line-height CSS属性。

Answer 2

如果要向下移动文本，请使用padding-top。

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保证金有所变化，所以你的链接也会改变位置。

Answer 4

行高可以根据您的具体情况而有效。

行高问题可能是如果你有背景颜色然后它也会扩展。

对于我正在做的事情，我会嵌套一些divs

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

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

此内联样式仅为临时样式

Answer 5

Vertical align does the trick

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

CSS：将文本向下移动几个像素但仍然保持背景？

5 个答案: