বুটস্ট্র্যাপ টেবিলের উল্লম্ব সারিবদ্ধ

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

ইন Boostrap 4 , এই সঙ্গে অর্জন করা যেতে পারে .align-middle উল্লম্ব সারিবদ্ধতা ইউটিলিটি বর্গ।

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

Comments

@ ব্যারিফ্র্যাঙ্কলিন সেই টেবিলটিতে একটি শ্রেণি যুক্ত করুন <table class="table vertical-align">, এবং সেই শ্রেণীর ব্যবহার করে নির্বাচকের সুনির্দিষ্টতা কিছুটা বাড়িয়ে দিন table.vertical-align > tbody > tr > td {},। .table.vertical-alilgn > tbody > tr > td {}এটি প্রথম বিকল্পের চেয়ে উচ্চতর নির্দিষ্টতা থাকা সত্ত্বেও আপনিও করতে পারেন । আমি সর্বদা চেষ্টা করি আমার সিএসএস নির্বাচকদের যতটা সম্ভব সম্ভব হিসাবে স্বতন্ত্রতা বাড়ানোর চেষ্টা করি। লক্ষ্য করুন যে প্রথম বিকল্পটি একটি সারণী উপাদান নির্বাচন করছে .vertical-alignযা দ্বিতীয় বিকল্পটি এমন একটি উপাদান নির্বাচন করছে যা .tableAND .vertical-alignবর্গ রয়েছে।

— হাঙ্গারস্টার

Answer 2

বুটস্ট্র্যাপ ৪ হিসাবে কাস্টম সিএসএসের পরিবর্তে অন্তর্ভুক্ত ইউটিলিটিগুলি ব্যবহার করা এখন এটি আরও সহজ । আপনাকে কেবল শ্রেণিবদ্ধ-মধ্যম টিডি-এলিমেন্টে যুক্ত করতে হবে:

<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

SCSS

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

ব্যবহার

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

Answer 6

চেষ্টা করুন:

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