英文:
How to let element align and center without using align-items and justify-content?
问题
这应该适用于HTML电子邮件，所以我不能使用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>左侧和居中</p>
</div>
<div style="display: inline-block; text-align: end">
<p>右侧和</p>
</div>
<div style="display: inline-block; text-align: end">
<p>居中</p>
</div>
</div>
英文:
It should work for html email, so I can't use align-items and justify-content
I want to let elements center on the same line, align left and right.
I have try to set display: inline-block; to let them in the same line, but text-align: start and text-align: end is not working.
<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
得分: 1
使用display: table和display: table-cell，并添加vertical-align: middle。
尝试以下代码：
<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>左侧和居中</p>
</div>
<div style="display: table-cell; text-align: end; vertical-align: middle;">
<p>右侧和</p>
</div>
<div style="display: table-cell; text-align: end; vertical-align: middle;">
<p>中间</p>
</div>
</div>
英文:
Use Display: table and Display: table-cell and add Vertical-align: middle.
Try with the below code:
<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
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论