如何使元素居中,如果不使用 justify-content?

huangapple go评论55阅读模式
英文:

Hot to make element in the center if I don't use justify-content?

问题

我的HTML文件是用于“HTML电子邮件”,因此我无法使用“justify-content”。

以下是居中的原始代码:

<div style="display: flex; justify-content: center;">
  <p>Hello &amp;nbsp</p>
  <p>World</p>
</div>

对于“HTML电子邮件”,我必须放弃使用“justify-content”,改用“text-align: center”:

<div style="display: flex; text-align: center;">
  <p>Hello &amp;nbsp</p>
  <p>World</p>
</div>

但是在结果中,元素位于左侧而不是居中,如果我必须使用“display: flex”,应该如何实现它以适用于“HTML电子邮件”?

英文:

My HTML file is for html email, so I can't use justify-content.

Here is the original code for center:

&lt;div style=&quot;display: flex; justify-content: center;&quot;&gt;
  &lt;p&gt;Hello &amp;nbsp&lt;/p&gt;
  &lt;p&gt;World&lt;/p&gt;
&lt;/div&gt;

For html email I have to give up use justify-content, change to use text-align: center

&lt;div style=&quot;display: flex; text-align: center;&quot;&gt;
  &lt;p&gt;Hello &amp;nbsp&lt;/p&gt;
  &lt;p&gt;World&lt;/p&gt;
&lt;/div&gt;

but in the result element is on the left side not in the center, if I have to use display: flex

How to achieve it for html email ?

答案1

得分: 1

为什么要使用 flex 呢?尝试这样做:

<div style="text-align:center;">
  <p style="display:inline-block;">Hello &amp;nbsp</p>
  <p style="display:inline-block;">World</p>
</div>
英文:

Why use flex then? Try this:

&lt;div style=&quot;text-align:center;&quot;&gt;
  &lt;p style=&quot;display:inline-block;&quot;&gt;Hello &amp;nbsp&lt;/p&gt;
  &lt;p style=&quot;display:inline-block;&quot;&gt;World&lt;/p&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年2月18日 12:50:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75491263.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定