spostando un pezzo di testo verso il basso con i CSS

Question

voglio spostare un'etichetta di testo verso il basso di circa il 6px Vi allego lo stile:

.price-label{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:small; 
    position:relative; 
    bottom:-6px; 
    vertical-align:bottom; 
} 

L'HTML è:

<table border="0" cellspacing="1" cellpadding="0"> 
    <tr> 
     <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td> 
     </tr> 
      <tr> 
        <td>&nbsp;</td> 
        <td class="price-label">54.67</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CCCCCC">&nbsp;</td> 
        <td height="45">&nbsp;</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CC3300">&nbsp;</td> 
        <td height="112">&nbsp;</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CCCCCC">&nbsp;</td> 
        <td height="22">&nbsp;</td> 
        </tr> 
       </table> 

Visivamente Voglio che il 54,67 etichetta per apparire parallela orizzontalmente - alla fessura dove si incontrano la cella grigia (quella superiore) e la cella rossa (la seconda dall'alto). Poiché il numero rappresenta quel punto nella barra a sinistra.

Quindi, se qualche altro technqiue è migliore, per favore fatemelo sapere, forse dovrei usare DIVs che mi dia più controllo?

Answer 1

Se sto leggendo questo correttamente, quindi stai cercando di cavalcare il confine tra due celle di tabella che non funzionerà. Dovrai consolidare le prime due celle nella colonna destra e quindi rowspan = "2" la nuova cella con il numero in essa contenuto. Quindi sopra o sotto allineare verticalmente il testo nella cella e aggiungere un padding-top fino a quando non è allineato correttamente.

Answer 2

Si potrebbe essere meglio utilizzare:

.price-label { margin-top: 6px; } 

E 'difficile sapere di più senza un contesto di ciò che altro è intorno a quel cella di una tabella però.

Answer 3

Se si desidera spostarlo giù, è necessario spostare una positiva 6px, non un 6px negativo , e impostare la proprietà superiore, non inferiore

position: relative; 
top: 6px; 

Answer 4

Usa padding-top:6px; invece di posizionare, che può diventare molto disordinato rispetto agli elementi di pari livello, ecc. E ha effetti collaterali.

Answer 5

L'etichetta è un elemento in linea, margine/riempimento funzionerà solo quando lo si fa un blocco (blocco in linea, blocco o float). Prova questo:

.price-label { 
     padding:6px 0 0; 
    display: inline-block; 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; }