代码之家 › 专栏 › 技术社区 › Morton

如何在不使用对齐项目和对齐内容的情况下使元素对齐和居中?

html-email css html

Morton · 技术社区 · 2 年前

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

1 回复 | 直到 2 年前

Harpreet Kaur 2 年前

使用显示:表格和显示:表格单元格,并添加垂直对齐:中间。

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前