Html段落如何将文本居中对齐并在同一位置或位置开始所有文本行？

Question

 <p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>

我试图用 HTML 编写一个段落，我需要将文本居中对齐，文本已对齐，但问题是文本没有从同一位置或位置开始。请检查图片以便清楚地理解我，谢谢。

我的HTML

检查这张图片

Answer 1

如果您只能设置<p>元素的样式，请执行以下操作：

添加display: flex将其转换p为弹性容器，并text-align: left保持文本左对齐。

将容器的方向设置为column，使其保留分隔符，然后align-items: center。

align-items将在横轴上对齐元素，在本例中是水平轴。

 <p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>