Блог

Главная - Вопросы по программированию - Как выровнять по вертикали середину (содержимое), когда высота таблицы td div фиксирована?

Как выровнять по вертикали середину (содержимое), когда высота таблицы td div фиксирована?

#html #css #flexbox #css-selectors

Вопрос:

У меня есть одна таблица и несколько строк таблицы. Я хочу исправить высоту для td, поэтому я создал один div, установив высоту 60 пикселей и переполнение до скрытого, что дает мне соответствующий вывод. Но если содержание меньше в td, оно должно быть выровнено по вертикали до середины.

 table, th, td {
  border:1px solid black;
}
.fixed-height{
    height:60px;
    overflow: hidden;
} 
 <table style="width:50%">
  <tr>
   <td><div class="fixed-height" ><span>TEST TEST TEST TEST TEST TEST TEST TEST TEST
   TEST TEST TEST TEST TEST TEST TEST EST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TE
   </span>
   </div></td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
   <tr>
    <td><div class="fixed-height" >this should be center</div></td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td><div class="fixed-height" >this should be centerl</div></td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

ссылка на jsfiddle

Ответ №1:

Добавьте следующий код в свой css.

 .fixed-height {
  display: inline-grid;
  align-items: center;
  height: 60px;
  overflow: hidden;
}

введите описание изображения здесь

Комментарии:

1. Это прекрасно работает, когда при наличии двух или нескольких пролетов в div он занимает больше места. скриншот

2. или же вы можете указать другой класс для вертикального выравнивания. You can use display: flex, align-items: center . Надеюсь, это поможет 🙂

3. Ранее я пробовал использовать сам flex, но по какой-то причине текст сокращает ss

4. Да, вот почему я упомянул, что вам нужно указать новый класс. Если это будет статическая страница, это решит проблему. Если он динамичен, этот подход не будет лучшим..

5. Это было бы динамично, я бы искал другое утешение

Метки: ,