cambio de un trozo de texto hacia abajo usando CSS

Question

Quiero cambiar una etiqueta de texto por sobre 6px os adjunto el estilo:

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

El HTML es:

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

visualmente Quiero que el 54.67 etiqueta para que aparezca horizontalmente paralela - al espacio donde se encuentran la celda gris (la parte superior) y la celda roja (la segunda desde la parte superior). Como el número representa ese punto en la barra de la izquierda.

Así que si alguna otra técnica es mejor, por favor avíseme, tal vez debería usar DIVs ¿eso me daría más control?

Answer 1

Si estoy leyendo esto correctamente, entonces está tratando de montar el borde entre dos celdas de la tabla que no funcionará. Necesitará consolidar las dos primeras celdas en la columna derecha y luego rowspan = "2" la nueva celda con el número en ella. Luego, en la parte superior o inferior, alinee verticalmente el texto de la celda y agregue algo de relleno hasta que esté alineado correctamente.

Answer 2

Usted puede ser mejor usar:

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

Es difícil saber más sin algún contexto de lo demás es alrededor de esa celda de la tabla sin embargo.

Answer 3

Si desea desplazarlo abajo, es necesario cambiar un positivo 6px, no un 6px negativo , y establecer el superior propiedad, no inferior

position: relative; 
top: 6px; 

Answer 4

Uso padding-top:6px; en lugar de posicionamiento, que puede ser muy complicado con relación a los elementos hermanos, etc. y tiene otros efectos secundarios.

Answer 5

La etiqueta es un elemento en línea, el margen/relleno solo funcionaría si lo convierte en un bloque (en línea, bloque o flotante). Intente esto:

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