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

我有一些CSS悬停时更大的按钮。我也做了更大的文本，但我想将文本向下移动几个像素，而不会混淆正在使用的背景图像。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; 
}

来源

2012-06-11 Aaron

OT：请加'角色= “按钮”到链接，所以浏览器认为它们是按钮 –

如果你想要的文字上下移动，使用填充顶。

来源

2012-06-11 14:51:37

使用line-height CSS属性。

来源

2012-06-11 14:51:51 Quantastical

使用下面的风格的链接：

#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:hoverheight:34px; width:140px;，
a:visited - height:34px; width:140px;），

这就是为什么你得到不同的大小，位置（在a使用margin:auto - 0px），但对于a:hover保证金有变化，所以你的链接也改变位置。

来源

2012-06-11 15:03:45 miszczu

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

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

的东西，我在干什么，我嵌套一些divs

我用position:relative; top:20px;

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

这内嵌样式只是暂时

来源

2018-01-11 16:23:03

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

回答

相关问题