टीडी टैग

Question

में तत्वों को लंबवत रूप से संरेखित करने के लिए कैसे करें मैं अपने <td> टैग को केंद्र/मध्य में लंबवत रूप से 3 तत्वों को संरेखित करना चाहता हूं।

1. छवि बटन (एक टैग) शीर्ष तीर छवि
2. jQuery स्लाइडर
3. छवि बटन (एक टैग) नीचे तीर छवि

मूलतः: इन तत्वों है कि मैं संरेखित करना चाहते हैं एक चार्ट के लंबवत स्क्रॉलिंग के लिए तत्व हैं। वे थोड़ा गलत तरीके से गलत हैं। मैं उन्हें सभी केंद्र में होना चाहता हूं।

मेरे वर्तमान कोड है:

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

मैं छवि बटन से संबंधित div टैग को हटाने के लिए खुला है, लेकिन टीडी टैग वहाँ रहना चाहिए।

Answer 1

आपकी मदद के लिए सभी को धन्यवाद। मुझे जवाब मिल गया। यह नया कोड है। केवल एक अतिरिक्त विशेषता align = center जोड़ने के लिए td टैग बदल गया है। यह केंद्र में टीडी टैग के भीतर सभी तत्व संरेखित करेगा। तालिका सेल में

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

मुझे यकीन नहीं है कि मैं पूरी तरह से समझता हूं, लेकिन शायद ऐसा कुछ हो सकता है?

Answer 3

के बारे में पढ़ें ऊर्ध्वाधर- align here

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

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