Вертикальный текст по центру без ячейки таблицы и высоты строки? - PullRequest
Новая
       10

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

0 голосов
/ 14 декабря 2018

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

my css 

img {
    width: 80px;
    height: 81px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

my html 

<p>
  <img src="../assets/imagens/recomendacoes_tenis.png">
  Devido ao fato de grande parte do calçamento da cidade ser feito em pedras e, por isso escorregadio, evite o uso de sapatos de salto e/ou desconfortáveis. Dê preferência aos tênis.
</p>
<p>
   <img src="../assets/imagens/recomendacoes_mochila.png">
   Evite peso extra. Há muitas ladeiras e escadarias na cidade, por isso, prefira mochilas e pastas menores e mais leves, carregue somente o essêncial. Em alguns atrativos será solicitado que bolsas, mochilas e equipamentos fotográficos sejam guardados na recepção.
</p>
        ...

как это выглядит сейчас

Может кто-нибудь помочь мне сделать это?Большое спасибо

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Просто установите родительский элемент изображения на flex, а для свойства align-items - center. 

img {
    width: 80px;
    height: 81px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

p {
  display: flex;
  align-items: center;
}

Код

0 голосов
/ 14 декабря 2018

Bootstrap 4 теперь включает в себя несколько классов с вертикальным выравниванием. 

<div class="align-middle">
    this text is vertically aligned in the middle!
</div>

https://getbootstrap.com/docs/4.1/utilities/vertical-align/

...