没有表格单元格和行高的垂直居中文本？答案

【问题标题】：Vertically center text without table-cell and line-height?没有表格单元格和行高的垂直居中文本？
【发布时间】：2019-05-15 20:13:41
【问题描述】：

我有这个页面1，我希望文本垂直居中对齐。我不能使用表格单元格，因为当我这样做时，它会在同一行中显示所有项目，而事实并非如此，正如您在图像 1 中看到的那样。我也不能设置固定的行高，因为每个文本都有大小。

我的 CSS

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

我的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

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

【问题讨论】：

请张贴html

标签： html css bootstrap-4 vertical-alignment

【解决方案1】：

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

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

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

Code

【讨论】：

非常感谢！

【解决方案2】：

Bootstrap 4 现在包含一些垂直对齐类。

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

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

【讨论】：

它没有用 :( 我尝试只放置类 align-middle 并尝试将高度设置为与侧面图像相同的大小，但没有一种方法起作用。