Question

我有此页面1，并且我希望文本垂直居中对齐。我不能使用table-cell，因为当我这样做时，它会在同一行中显示所有项目，事实并非如此，如图像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

有人可以帮助我做到这一点吗？非常感谢

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

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

2 个答案: