cómo alinear elementos verticalmente en la etiqueta td

Question

Quiero alinear 3 elementos en mi etiqueta <td> verticalmente en el centro/centro. Estos son los elementos que desea alinear: Imagen flecha superior

control deslizante jQuery

imagen

botón de imagen de flecha abajo (una etiqueta)

En esencia, el

1. botón de imagen (una etiqueta) los elementos están ahí para desplazarse verticalmente de un gráfico. Están un poco desalineados. Quiero que todos estén en el centro.

   Mi código actual es:

   <td style="vertical-align:top;">     
       <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;"> 
       <a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a> 
       </div> 
       <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div> 
       <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;"> 
       <a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a> 
       </div> 
   </td> 
   

   Estoy abierto a la eliminación de la etiqueta div relacionada con los botones de imagen, pero etiqueta td debe permanecer allí.

Answer 1

Gracias a todos por su ayuda. Encontré la respuesta yo mismo. Este es el nuevo código. Solo la etiqueta td ha cambiado para agregar un atributo adicional align = center. Esto alineará todos los elementos dentro de la etiqueta td en el centro.

<td align="center" style="vertical-align:top;">    
    <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;"> 
    <a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a> 
    </div> 
    <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div> 
    <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;"> 
    <a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a> 
    </div> 
</td> 

Answer 2

<td style="vertical-align:top;">     
    <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;"> 
    <div align="center"><a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a> 
     </div> 
    </div> 
    <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div> 
    <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;"> 
    <div align="center"><a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a> 
     </div> 
    </div> 
</td> 

No estoy seguro de que entiendo completamente, pero tal vez algo como esto?

Answer 3

Lea sobre vertical-align en celdas de la tabla here

vertical-align:middle 
vertical-align:top 
vertical-align:bottom 

http://phrogz.net/css/vertical-align/