jquery - CSS - 在 div 中居中 但文本左对齐

Question

我在这里看到了如何将 <p> 居中的答案带有居中对齐的文本。但是我如何将 <p> 居中呢？文本向左对齐？我的诗歌网站需要它，所以我无法将文本居中。

我希望它看起来像这样:

Answer 1

将文本放入容器中(在我的示例中称为 poemtext)。这个容器，你制作 display: inline-block 让它成为一个紧贴文本的 block ，并且可以在父元素中居中。通过一些额外的标记，您可以将诗歌文本居中，并确保它在换行时自动中断。

请注意，诗歌文本开始标记的 > 必须与诗歌的第一行在同一行，否则您会在诗歌的开头多出一条白线。

.poem {
  text-align: center;
}

.poemtext {
  display: inline-block;
  text-align: left;
  white-space: pre-line;
  background-color: #eee;
  padding: 1em;
}

<div class="poem">
  <div class="poemtext"
  > Roses are red
    Violets are blue
    All my base are belong to you
  </div>
</div>