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转换为 flex 容器，并添加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>

Answer 2

这是最短的方法，而且很简单。 您设置了一个固定的宽度并给它自动边距，这样它就会居中。

 .container { width: 300px; margin: 0 auto; }

 <div class="container"> <p> 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> </div>

如果您的布局更复杂，您可能需要使用 flex。 例如：

 .container { width: 100%; display: flex; align-items: center; justify-content: center; } .content{ flex-basis: 300px; flex-grow: 0; flex-shrink: 0; }

 <div class="container"> <div class="content"> <p> 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> </div> </div>

Answer 3

如果您将段落放在 div 内（具有固定宽度）并将 div 在页面上居中，那么您可以使用 text-align 来设置段落本身的样式（在 div 内）。 我想你想要text-align: left; 对于段落文本本身。 这是 div 包装器的 CSS。

CSS

.text-wrapper{
width: 300px;
margin: 0px auto;
}

HTML

   <body>
      <div class="text-wrapper">
        <p style="text-align: left;">
        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>
      </div>
    </body>

Answer 4

 p { position: absolute; left: 50%; -ms-transform: translate(-50%,0); transform: translate(-50%, 0); }

 <p> 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>

Answer 5

你可以这样做：

 <div style="margin:0 auto;width:50vw"><p style="text-align: left;"> 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></div>

text-align: center-right不是有效的属性。 然而，我们可以在你的段落周围包裹一个 div 并将其移动到页面的中心，margin:0 auto。 我们还必须给这个 div 一个固定的宽度。

Answer 6

你只需要用“左”改变“中心”。 它会修复它。

 .container { text-align:left; }

 <p class='container'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra nibh cras pulvinar mattis nunc sed blandit. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. </p>