it-swarm.com.ru

Как выровнять изображение и текст по вертикали в ячейке таблицы?

Я пытаюсь сделать так, чтобы текст располагался справа и вертикально по центру по отношению к изображению. Как я могу это сделать?

Мой текущий код:

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>
4
Tim Akgayev

использовать CSS3 Гибкая разметка коробки :

из документации:

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

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

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}
<div id="pageElement">
  <div> <img src="http://placehold.it/350x150"> </div>
  <div> text </div>
</div>

Я нашел это шпаргалка очень полезным и совместимость браузера вы найдете здесь

5
Vickel

В ячейке таблицы значением по умолчанию vertical-align является baseline. Вы можете изменить это на middle для выравнивания по центру. Подробнее об этом читайте на MDN .

.table {
  display: table;
}
.table > div {
  display: table-cell;
  vertical-align: middle;
}
<div class="table">
  <div><img src="//dummyimage.com/100"></div>
  <div>text</div>
</div>
1
Stickers