Verschiebung ein Stück Text unten CSS

Question

Ich möchte ein Text-Label verschieben um rund 6px ich den Stil bin Befestigung:

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

Die HTML ist:

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

Optisch möchte ich die 54.67 Etikett erscheint horizontal parallel - zu der Lücke, wo sich die graue Zelle (oberste) und rote Zelle (zweite von oben) treffen. Da die Zahl diesen Punkt in der Leiste auf der linken Seite darstellt.

Also, wenn ein anderes technqiue besser ist, lass es mich wissen, vielleicht sollte ich DIVs verwenden, würde das mir mehr Kontrolle geben?

Answer 1

Wenn ich das richtig lese, dann versuchen Sie, die Grenze zwischen zwei Tabellenzellen zu spreizen, die nicht funktionieren. Sie müssen die ersten beiden Zellen in der rechten Spalte konsolidieren und dann rowspan = "2" die neue Zelle mit der Nummer darin. Richten Sie dann oben oder unten vertikal den Text in der Zelle aus, und fügen Sie ein Füllelement hinzu, bis es richtig ausgerichtet ist.

Answer 2

Sie könnten besser dran mit:

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

Es ist schwierig, mehr zu wissen, ohne einen Kontext dessen, was sonst um, obwohl dieser Tabellenzelle ist.

Answer 3

Wenn Sie es verschieben möchten unten, müssen Sie es eine positive 6px, keine negative 6px verschieben, und stellen Sie die oben Eigenschaft, nicht unten

position: relative; 
top: 6px; 

Answer 4

Verwenden padding-top:6px; statt der Positionierung, die in Bezug auf Geschwisterelemente usw. sehr unordentlich werden kann .. und hat andere Nebenwirkungen.

Answer 5

Label ist ein Inline-Element, margin/padding funktioniert nur, wenn Sie einen Block erstellen (Inline-Block, Block oder Float). Versuchen Sie folgendes: