बूटस्ट्रैप तालिका में लंबवत संरेखित करें

Question

मैं 4 स्तंभों के साथ एक तालिका प्रदर्शित करने का प्रयास कर रहा हूं, जिनमें से एक छवि है। नीचे स्नैपशॉट है: -

मैं पाठ को केंद्र स्थिति में लंबवत रूप से संरेखित करना चाहता हूं, लेकिन किसी भी तरह सीएसएस काम नहीं करता है। मैंने बूटस्ट्रैप उत्तरदायी तालिकाओं का उपयोग किया है। मैं जानना चाहता हूं कि मेरा कोड काम क्यों नहीं करता है और यह काम करने के लिए व्हाट्सएप सही तरीका है।

निम्नलिखित तालिका के लिए कोड है

सीएसएस

img {
    height: 150px;
    width: 200px;
}
th, td {
    text-align: center;
    vertical-align: middle;
}

एचटीएमएल

<table id="news" class="table table-striped table-responsive">
    <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Photo</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $i=0;
        foreach ($result as $row) 
        { ?>
        <tr>
            <td>
                <?php echo 'Lorem Ispum'; ?>
            </td>
            <td>
                <?php echo '[e-mail]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

        <?php
        }
        ?>           
    </tbody>
</table>

Answer 1

आपके द्वारा प्रदान किए गए आपके सीएसएस चयनकर्ता के आधार पर बूटस्ट्रैप द्वारा परिभाषित सीएसएस नियमों को ओवरराइड करने के लिए पर्याप्त विशिष्ट नहीं है ।

इसे इस्तेमाल करे:

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

में बूटस्ट्रैप 4 , इस के साथ प्राप्त किया जा सकता .align-middle लंबवत संरेखण उपयोगिता वर्ग।

<td class="align-middle">Text</td>

Comments

@BarryFranklin उस तालिका में एक वर्ग जोड़ें <table class="table vertical-align">, और उस वर्ग का उपयोग करके चयनकर्ता की विशिष्टता को थोड़ा बढ़ाएं table.vertical-align > tbody > tr > td {}। आप यह भी कर सकते हैं .table.vertical-alilgn > tbody > tr > td {}कि पहले विकल्प की तुलना में अधिक विशिष्टता है। मैं हमेशा अपने सीएसएस चयनकर्ताओं में विशिष्टता को बढ़ाने की कोशिश करता हूं जितना संभव हो उतना कम। ध्यान दें कि पहला विकल्प एक तालिका तत्व का चयन कर रहा है, .vertical-alignजबकि दूसरा विकल्प एक तत्व का चयन कर रहा है जिसमें .tableAND .vertical-alignवर्ग हैं।

— भूख

Answer 2

बूटस्ट्रैप 4 के रूप में यह अब कस्टम सीएसएस के बजाय शामिल उपयोगिताओं का उपयोग करना बहुत आसान है । आपको बस वर्ग -मध्य को td-element में जोड़ना होगा :

<table>
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Answer 3

मेरे लिए <td class="align-middle" >${element.imie}</td>काम करता है। मैं बूटस्ट्रैप v4.0.0-बीटा का उपयोग कर रहा हूं।

Answer 4

निम्नलिखित कार्य करने के लिए प्रकट होता है:

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

आप किसी विशिष्ट तालिका पर भी लागू कर सकते हैं:

#some_table td {
  vertical-align: middle !important;
}

Comments

!importantओवरकिल है, जिस तरह से अधिक विशिष्टता जोड़ना आवश्यक है।

— भुखमरी

Answer 5

एससीएसएस

.table-vcenter {
    td,
    th {
        vertical-align: middle;
    }
}

उपयोग

<table class="table table-vcenter">
</table>

Answer 6

प्रयत्न:

.table thead th{
   vertical-align:middle;
}