没有 table-单元格和行高的垂直居中文本？

Question

我有这个页面 1 and I want the text to be vertically center aligned. I can't use table-cell because when I do, it displays all items in the same row, and that's not the case, as you can see in the image 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>
        ...

how it it is looking now

有人可以帮我做这个吗？非常感谢

Answer 1

Bootstrap 4 现在包括一些垂直对齐类.

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

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

Answer 2

只需将图像的父级设置为 flex 并将 align-items 属性设置为 center。

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

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

Code

没有 table-单元格和行高的垂直居中文本？

Vertically center text without table-cell and line-height?

html

css

vertical-alignment

bootstrap-4