CSS: spostando il testo di pochi pixel ma mantenendo lo sfondo fermo?

Question

Ho alcuni pulsanti CSS che sono più grandi quando si passa il mouse sopra. Ho anche ingrandito il testo, tuttavia vorrei spostare il testo di alcuni px senza interferire con l'immagine di sfondo utilizzata.

aiuto?

mio codice è simile al seguente:

<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

Se si desidera spostare il testo verso il basso, utilizzare padding-top.

Answer 2

Utilizzare la proprietà CSS line-height.

Answer 3

utilizzare il seguente stile per link:

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

In :hover e :visited definire solo ciò che si desidera modificare (background, font-size, etc.).

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

nei tuoi link di codice hanno dimensioni diverse:
a-height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited-height:34px; width:140px;),

è per questo che ricevendo diverse dimensioni, la posizione (in a si utilizza margin:auto - 0px), ma per il margine a:hover è cambiato, quindi il tuo link cambia anche posizione.

Answer 4

line-height può funzionare a seconda della situazione.

Il problema con l'altezza della linea può essere se si dispone di un colore di sfondo e quindi si espanderà anche.

Per qualcosa che stavo facendo, sto nidificazione certa divs

Ho usato position:relative; top:20px;

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

Questo stile in linea è SOLTANTO TEMPORANEA