td etiketindeki öğeleri dikey olarak hizalama

Question

<td> etiketteki 3 unsuru dikey olarak ortada/ortada hizalamak istiyorum.

1. görüntü düğmesi (bir etiket)
2. jquery kaydırıcıyı
3. görüntü düğmesi (bir etiket) alt ok görüntü

Esasen üst ok görüntüsünü: Bunlar benim hizalamak istediğiniz öğeleri vardır Bir grafiğin dikey olarak kaydırılması için öğeler var. Biraz yanlış hizalanmışlar. Hepsinin merkezde olmasını istiyorum.

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

Ben görüntü düğmeleri ile ilgili div etiketi kaldırarak açığım ama td etiketi orada kalmalı:

Benim şu anki kodudur.

Answer 1

Yardımlarınız için hepinize teşekkür ederiz. Cevabı kendim buldum. Bu yeni kod. Sadece td etiketi, ek bir özellik eklemek için değişti = align = center. Bu, td etiketi içindeki tüm öğeleri merkezde hizalar. yaklaşık

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

Tamamen anladığımdan emin değilim, ama belki böyle bir şey?

Answer 3

Oku here

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

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