CSS

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

这是最短的方法，很简单。您设置了固定的宽度并为其设置了自动边距，以使其居中。

.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 2

如果您只能设置<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 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

CREATE TABLE TEST_DATA AS
  ( SELECT 'A' AS dummy
      FROM dual
     UNION
    SELECT 'B' AS dummy
      FROM dual
  );

UPDATE TEST_DATA 
   SET dummy = 'C'
 WHERE dummy = 'B';

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

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

您只需要将'center'更改为'left'。它会解决它。

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

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

6 个答案:

CSS

HTML