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：將文本向下移動幾個像素，但仍保持背景？

回答

相關問題