부트 스트랩 테이블에서 수직 정렬

4 개의 열이있는 테이블을 표시하려고합니다. 그 중 하나는 이미지입니다. 아래는 스냅 샷입니다.

텍스트를 중앙 위치에 세로로 정렬하고 싶지만 어떻게 든 CSS가 작동하지 않는 것 같습니다. 부트 스트랩 반응 형 테이블을 사용했습니다. 내 코드가 작동하지 않는 이유와 작동하도록하는 올바른 방법을 알고 싶습니다.

다음은 테이블의 코드입니다.

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 선택기를 기반으로 할 때 구체적 이지 않습니다. Bootstrap에서 정의한 CSS 규칙을 재정의 할만큼 .

이 시도:

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

Boostrap 4 에서는 .align-middle Vertical Alignment 유틸리티 클래스를 사용하여이 작업을 수행 할 수 있습니다 .

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

Bootstrap 4부터는 사용자 정의 CSS 대신 포함 된 유틸리티 를 사용하는 것이 훨씬 쉬워 졌습니다. td-element에 align-middle 클래스를 추가하기 만하면됩니다 .

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