ट्विटर बूटस्ट्रैप का उपयोग करके, तालिका सेल में एक बटन को लंबवत रूप से केंद्रित करना

Question

मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और एक टेबल सेल के भीतर एक बटन को केंद्रित करने का प्रयास कर रहा हूं। मुझे केवल इसे लंबवत केंद्रित करने की आवश्यकता है।

<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

कृपया समस्या के लिए मेरी JSFiddle देखें । मैंने कई टेबल सेंटरिंग ट्रिक्स आज़माए हैं, जिनके बारे में मुझे पता है, लेकिन कोई भी ठीक से काम नहीं करता है। कोई विचार? अग्रिम में धन्यवाद।

अद्यतन: हाँ, मैंने कोशिश की है vertical-align:middle;, और यह काम करता है अगर यह इनलाइन है, लेकिन ऐसा नहीं है अगर यह एक वर्ग में tdहै। इसे प्रतिबिंबित करने के लिए JSFiddle को अपडेट किया गया।

अंतिम अद्यतन: मैं एक बेवकूफ हूँ, और यह देखने के लिए जाँच नहीं करता कि यह बूटस्ट्रैप द्वारा लिखा जा रहा है या नहीं

Answer 1

BOOTSTRAP 3.X के लिए:

बूटस्ट्रैप में तालिका कोशिकाओं के लिए अब निम्नलिखित शैली है:

.table tbody > tr > td{
    vertical-align: top;
}

जाने का तरीका अपनी खुद की कक्षा को जोड़ना है, पिछले चयनकर्ता में अधिक विशिष्टता जोड़ना है:

.table tbody > tr > td.vert-aligned {
    vertical-align: middle;
}

और फिर अपने वर्ग में जोड़ें td:

<tr>
    <td class="vert-aligned"></td>
    ...
</tr>

BOOTSTRAP 2.X के लिए

बूटस्ट्रैप के साथ ऐसा करने का कोई तरीका नहीं है ।

जब तालिका कोशिकाओं में उपयोग किया जाता है, तो ऊर्ध्वाधर-संरेखित करता है जो अधिकांश लोग इसकी अपेक्षा करते हैं, जो कि पुराने (पुराने, पदावनत) मान्य विशेषता की नकल करना है। एक आधुनिक, मानकों के अनुरूप ब्राउज़र में, निम्नलिखित तीन कोड स्निपेट समान कार्य करते हैं:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

अपने फिडेल को अपडेट करके देखें

आगे की

• वर्टिकल-अलाइन: बूटस्ट्रैप 2 के साथ मध्य
• ऊर्ध्वाधर-संरेखित समझना
• एक div में तत्वों का लंबवत संरेखण

इसके अलावा, आप tdवर्ग का उपयोग करने का उल्लेख नहीं कर सकते .vertक्योंकि बूटस्ट्रैप में पहले से ही यह वर्ग है:

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

और vertical-align: middle'.vert' वर्ग में ओवरलोडिंग कर रहा है, इसलिए आपको इस वर्ग को इस प्रकार परिभाषित करना होगा td.vert।

Comments

अपडेटेड jsfiddle से लिंक करने के लिए धन्यवाद। सीएसएस में क्लास स्टेटमेंट बनाते समय मुझे जानकारी नहीं थी, और यह टेबल स्पेसिफिक है, आपको क्लास का नाम रखने से पहले टेबल एलिमेंट को प्रीपेंड करना होगा। आपके उदाहरण में, 'td.vcenter' काम करता है, लेकिन अगर आप इसे सिर्फ '.vcenter' में बदलते हैं तो यह काम नहीं करता है।

— टिम हैबरसैक

धन्यवाद =) इसे ठीक करने के लिए इनलाइन सीएसएस का उपयोग किए बिना grt मदद!

— sk8terboi87

"लंब-संरेखित" कभी भी प्रलेखित नहीं किया गया था और वर्तमान बूटस्ट्रैप मास्टर में प्रकट नहीं होता है। इस तरह के सवालों का जवाब देते समय, कृपया प्रलेखित व्यवहार से चिपके रहें।

— डॉ। जन-फिलिप गेर्के

@ Jan-PhilipGehrcke: मुझे यकीन नहीं है कि आपका क्या मतलब है, लेकिन मैं यह नहीं कह रहा हूं कि vert-alignयह बूटस्ट्रैप का हिस्सा है, मैं मुख्य सीएसएस फ़ाइल में एक नया वर्ग जोड़ने के बारे में बात कर रहा हूं

— टॉम सर्दयू

क्षमा करें, मुझे वास्तव में इस तरह के एक मजबूत बयान देने से पहले आपके उत्तर को अधिक सावधानी से पढ़ना चाहिए।

— डॉ। जन-फिलिप गेर्के

Answer 2

बूटस्ट्रैप 3 के लिए थोड़ा अपडेट।

बूटस्ट्रैप में तालिका कोशिकाओं के लिए अब निम्नलिखित शैली है:

.table tbody>tr>td
{
    vertical-align: top;
}

जाने का तरीका एक ही चयनकर्ता के साथ अपनी खुद की कक्षा जोड़ना है:

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

और फिर इसे अपने टीएस में जोड़ें

<td class="vert-align"></td>

Comments

क्या परिवर्तन आधिकारिक रूप से प्रलेखित है?

— उपयोगकर्ता

Answer 3

इसे अपने सीएसएस में जोड़ें

.table-vcenter td {
   vertical-align: middle!important;
}

फिर अपनी मेज पर कक्षा में जोड़ें:

        <table class="table table-hover table-striped table-vcenter">

Comments

मुझे यह पसंद है क्योंकि आपको कक्षा को केवल 1 में जोड़ने की आवश्यकता है, बजाय इसे हर में जोड़ने के td।

— ह्यूगो सौसा

Answer 4

इसे ठीक करने के लिए, मैंने इस वर्ग को वेबपृष्ठ पर रखा

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

और यह मेरे टेम्पलेटफिल्ड में

<asp:TemplateField ItemStyle-CssClass="vcenter">

सीएसएस वर्ग के रूप में सीधे td (tabledata) तत्व को इंगित करता है और प्रत्येक सेटिंग के अंत में महत्वपूर्ण सांख्यिकीय है। यह नियम से अधिक बूटस्ट्रैप सीएसएस वर्ग सेटिंग्स करेगा।

आशा करता हूँ की ये काम करेगा

Answer 5

vertical-align: middle;उस tdतत्व में जोड़ें जिसमें बटन है

<td style="vertical-align:middle;">  <--add this to center vertically
  <a href="#" class="btn btn-primary">
    <i class="icon-check icon-white"></i>
  </a>
</td>

Comments

यहाँ अजीब बात है। अगर मैं इसे इनलाइन करता हूं, तो यह काम करता है। यदि मैं एक वर्ग बनाता हूं, और उस में लंबवत-संरेखण है, तो यह काम नहीं करता है। मैंने इसे दर्शाने के लिए jsfiddle को अपडेट किया।

— टिम हैबरसैक

डिबगर में इसे देखते हुए, मुझे लगता है कि बूटस्ट्रैप css द्वारा 'वर्टिकल' को ओवरराइड किया जा रहा है। इनलाइन शैली सीएसएस पर पूर्वता लेती है, इसलिए यह काम करता है।

— -टू

@ टिमहॉर्बसैक: मैंने एक वर्ग जोड़ा है और काम कर रहा है, बस td.vertइसके बजाय उपयोग करें .vert;)

— टॉम सरदयू

Answer 6

तो td डिफ़ॉल्ट ऊर्ध्वाधर-संरेखित करने के लिए सेट क्यों है: शीर्ष ;? मैं वास्तव में अभी तक नहीं जानता। मैं इसे छूने की हिम्मत नहीं करूंगा। इसके बजाय इसे अपनी स्टाइलशीट में शामिल करें। यह तालिकाओं में बटन को बदल देता है।

table .btn{
  vertical-align: top;
}