如何在不使用 align-items 和 justify-content 的情况下让元素对齐和居中？

Question

它应该适用于 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>

Answer 1

使用 Display: table 和 Display: table-cell 并添加 Vertical-align: middle.

[![在此处输入图片描述][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