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

cfh9epnr  于 2023-02-20  发布在  其他
关注(0)|答案(1)|浏览(168)

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

我试着设置display: inline-block;让它们在同一行,但是text-align: starttext-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>
mrphzbgm

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

相关问题