จัดแนวตั้งในตาราง bootstrap

ฉันกำลังพยายามแสดงตารางที่มี 4 คอลัมน์ซึ่งหนึ่งในนั้นเป็นรูปภาพ ด้านล่างนี้คือภาพรวม: -

ฉันต้องการจัดแนวข้อความให้อยู่ในตำแหน่งกึ่งกลางในแนวตั้ง แต่ดูเหมือนว่า css จะใช้งานไม่ได้ ฉันใช้ตารางตอบสนอง bootstrap แล้ว ฉันต้องการทราบว่าเหตุใดรหัสของฉันจึงไม่ทำงานและอะไรคือวิธีการที่ถูกต้องในการทำให้มันใช้งานได้

ต่อไปนี้เป็นรหัสสำหรับตาราง

CSS

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

HTML

<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 'lrem@ispum.com'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

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

จากสิ่งที่คุณระบุตัวเลือก CSS ของคุณไม่เฉพาะเจาะจงเพียงพอที่จะแทนที่กฎ CSS ที่กำหนดโดย Bootstrap

ลองสิ่งนี้:

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

ในBoostrap 4สามารถทำได้ด้วยคลาสยูทิลิตี้.align-middle Vertical Alignment

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

ตั้งแต่ Bootstrap 4 ตอนนี้ง่ายขึ้นมากโดยใช้ยูทิลิตี้ที่รวมอยู่แทน CSS ที่กำหนดเอง คุณต้องเพิ่ม class align-middleให้กับ 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>

สำหรับฉันได้<td class="align-middle" >${element.imie}</td>ผล ฉันใช้ Bootstrap v4.0.0-beta

สิ่งต่อไปนี้ดูเหมือนจะใช้งานได้:

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

คุณสามารถนำไปใช้กับตารางเฉพาะได้เช่นกัน:

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

SCSS

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

ใช้

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

ลอง:

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