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

Я пытаюсь выровнять свой текст по вертикали по центру строки независимо от того, как долго текст находится в моей таблице начальной загрузки.

Я пытаюсь справиться с этим с помощью vertical-align: middle; line-height:90px; На данный момент настройка высоты строки, кажется, работает и позволяет мне получить текст в центре, но если текст состоит из двух строк, то межстрочный интервал между ними слишком велик.

Как я могу выровнять текст по вертикали в правом столбце, чтобы он располагался по вертикали в середине страницы?

Вот мой фрагмент кода:

.table-bordered th, tbody td:nth-child(2) {
  vertical-align: middle;
line-height: 90px; 
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>

    <table class = "table table-bordered">
        <thead class = "text-14 tx-light">
          <tr class = "d-flex">
            <th class = "col-6 blue-background" scope = "col">LEFT</th>
            <th class = "col-6 red-background" scope = "col">RIGHT</th>
          </tr>
        </thead>
        <tbody class = "text-18 tx-dark">
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>
            <td  class = "col-6"> <a class = "text-underlined-18 ul-link">Link to the described article here  </a></td>
          </tr>
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>
            <td  class = "col-6"> <a class = "text-underlined-18 ul-link">Link to longer url that takes up two lines here test test test test </a></td>
          </tr>
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>ib
            <td  class = "col-6"> <a class = "text-underlined-18 ul-link"> Link to article here</a></td>
          </tr>
        </tbody>
      </table>

Я ожидаю, что мой текст будет находиться в центре строки, как на этой фотографии, без огромного разрыва между строками, если текст состоит из двух строк:

удалите d-flex из вашего tr и удалите высоту строки и все готово

— 15.12.2020 10:24

html css twitter-bootstrap

15.12.2020 02:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

125

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените нужный элемент данных таблицы на display: flex;, сделайте flex-direction: column; и justify-content: center;.

.table-bordered th, tbody td:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 90px; 
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>

    <table class = "table table-bordered">
        <thead class = "text-14 tx-light">
          <tr class = "d-flex">
            <th class = "col-6 blue-background" scope = "col">LEFT</th>
            <th class = "col-6 red-background" scope = "col">RIGHT</th>
          </tr>
        </thead>
        <tbody class = "text-18 tx-dark">
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>
            <td  class = "col-6"> <a class = "text-underlined-18 ul-ibisworld">Link to the described article here  </a></td>
          </tr>
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>
            <td  class = "col-6"> <a class = "text-underlined-18 ul-ibisworld">Link to longer url that takes up two lines here test test test test </a></td>
          </tr>
          <tr class = "d-flex">
            <td class = "col-6" scope = "row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
            </td>
            <td  class = "col-6"> <a class = "text-underlined-18 ul-ibisworld"> Link to article here</a></td>
          </tr>
        </tbody>
      </table>

15.12.2020 02:43

Другие вопросы по теме

Excel VBA для выбора вкладки навигации на веб-странице

Облегчить переход на кнопку ночного режима

Как получить ширину строки внутри абзаца?

Центральный компонент в реакции

PrimeNG Angular 10 — Как добавить иконку в p-autoComplete

Доступность: табуляция на мобильных устройствах идет за наложением навигации в нижней части окна просмотра

Переопределение родительского css после использования appendChild

Моя кнопка ввода не будет выдвигать элементы в список (React JS)

Не удается удалить белый заголовок в компоненте таблицы данных реакции

Лучший способ сделать отзывчивый видеофон размером с обложку на веб-сайте

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

Ответы 1

Другие вопросы по теме

Похожие вопросы