css 如何不使用对齐项和内容对齐使元素对齐居中？

cfh9epnr 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(167)

它应该适用于html email，所以我不能使用align-items和justify-content
我想让元素在同一条线上居中，左右对齐。

我试着设置display: inline-block;让它们在同一行，但是text-align: start和text-align: end不起作用。

<div style="width: 100%; height: 65%; background-color: pink">
  <div style="display: inline-block; text-align: start">
    <p>Left and Center</p>
  </div>
  <div style="display: inline-block; text-align: end">
    <p>Right and</p>
  </div>
  <div style="display: inline-block; text-align: end">
    <p>Center</p>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75492470/how-to-let-element-align-and-center-without-using-align-items-and-justify-conten

1条答案

按热度按时间

mrphzbgm1#

使用显示器：表格和显示：表格单元格并添加垂直对齐：中间。
[![在此输入图像说明][1]][1]
请尝试以下代码：

<div style="width: 100%; height: 200px; background-color: pink; display: table; table-layout: fixed;">
  <div style="display: table-cell; text-align: start; vertical-align: middle;">
    <p>Left and Center</p>
  </div>
  <div style="display: table-cell; text-align: end; vertical-align: middle;">
    <p>Right and</p>
  </div>
  <div style="display: table-cell; text-align: end; vertical-align: middle;">
    <p>Center</p>
  </div>
</div>

  [1]: https://i.stack.imgur.com/EOEI9.png

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何不使用对齐项和内容对齐使元素对齐居中？

1条答案

相关问题

热门标签

最新问答