Как вертикально центрировать элементы в таблице Bootstrap - PullRequest
Новая
       6

Как вертикально центрировать элементы в таблице Bootstrap

0 голосов
/ 01 марта 2020

Я видел этот вопрос и применил стиль, однако мои элементы в таблице не выровнены по вертикали:

enter image description here

HTML выглядит так: 

.table > tbody > tr > td {
        vertical-align: center;
        background-color: lightgreen;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="table-responsive">  
      <table class="table table-sm table-hover">
          <thead>
              <tr class="d-flex">
                  <th class="col-2">Item 01</th>
                  <th class="col-2">Item 02</th>
                  <th class="text-center col-4">Buttons</th>
                  <th class="text-right col-2">Item 04</th>
              </tr>
          </thead>
          <tbody>
              <tr class="d-flex">
                  <td class="col-2">
                      <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                          height: 80px;
                          border-radius: 100%;
                          background-size: cover;">
                      </div>
                  </td>
                  <td class="col-2 text-center">Hey!</td>
                  <th class="col-4">
                      <div class="row no-gutters">
                          <div class="col-2">
                              <button class="btn btn-secondary btn-block">
                                  -
                              </button>
                          </div>
                          <div class="col-8">
                              7 in cart
                          </div>
                          <div class="col-2">
                            <button class="btn btn-secondary btn-block">
                                +
                            </button>
                          </div>
                      </div>
                  </th>
                  <th class="col-2 text-right">Item 04</th>
              </tr>
          </tbody>
      </table>
    </div>

Я не могу понять, почему он не выровнен по вертикали при применении background-color. Не могли бы вы сказать, пожалуйста, как элементы могут быть выровнены по вертикали?

Любая помощь будет принята с благодарностью.

Это пример кода.

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Я проверил ваш код таблицы Html и проверил его в своем браузере. Я внес некоторые изменения в ваши классы th, td, а также я написал несколько CSS в таблице стилей для правильного выравнивания элемента столбца по вертикали. 

<tr class="d-flex">
                        <td class="col-2">
                            <div style="
                                background-image: url(//placehold.it/1026x600/CC1111/FFF);
                                width: 80px;
                                height: 80px;
                                border-radius: 100%;
                                background-size: cover;
                                ">
                            </div>
                        </td>
                        <td class="col-3 text-center coltd">Hey!</td>
                        <th class="col-4 colth">
                            <div class="row no-gutters">
                                <div class="col-2">
                                    <button class="btn btn-secondary btn-block">
                                        -
                                    </button>
                                </div>
                                <div class="col-8">
                                    7 in cart
                                </div>
                                <div class="col-2">
                                  <button class="btn btn-secondary btn-block">
                                      +
                                  </button>
                                </div>
                            </div>
                        </th>
                        <th class="col-2 text-right coltd">Item 04</th>
                    </tr>

и вы можете добавить этот css код в таблицу стилей 

.colth {
    padding: 30px 0 !important;
    text-align: left !important;
}
.coltd {
    padding: 30px 0 !important;
    text-align: left !important;
}

вы можете внести эти изменения в свой код, это будет очень полезно для вас Спасибо

1 голос
/ 01 марта 2020 
 <tbody>
          <tr class="d-flex">
              <td class="col-2">
                  <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                      height: 80px;
                      border-radius: 100%;
                      background-size: cover;">
                  </div>
              </td>

Должно быть (обратите внимание на класс .align-items-center, добавленный к гибкому div): 

 <tbody>
          <tr class="d-flex align-items-center">
              <td class="col-2">
                  <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                      height: 80px;
                      border-radius: 100%;
                      background-size: cover;">
                  </div>
              </td>
...