Центрирование текста в ячейке заголовка таблицы - PullRequest
1 голос
/ 15 апреля 2020

Мне трудно привести заголовки таблицы в центр. Таблица HTML ниже:

<div class="table-responsive">

  <table class="table">

  <thead>

    <tr>
      <th>Photo</th>
      <th>Description</th>
      <th>Location</th>
      <th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
      <th class="text-right">Price</th>
      <th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
    </tr>

  </thead>

  <tbody id="lisc_recs"></tbody>

  </table>

</div>

Именно этот столбец вызывает у меня изжогу:

<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>

Я могу получить его в центре, используя .text-center, если есть нет ли адаптивных элементов отображения внутри, например:

<th class="text-center">Disposition</th>

Есть ли способ центрировать текст внутри диапазона при отображении с помощью d- -flex или d- -table-cell?

Проблема, как представляется, заключается в том, что диапазон всегда генерируется сам на полной ширине:

enter image description here

1 Ответ

1 голос
/ 15 апреля 2020

Для центрирования содержимого в элементах flexbox требуется либо justify-content, либо align-items, но не text-align.

. Использовать класс Bootstrap '* justify-content-center.

Подробнее об этом

...