如何在 CSS 中最长的行上居中左对齐文本块？

Question

在排版风格的元素中，Robert Bringhurst 要求设计师根据最长的行将引用的诗句块居中，但将所有其他行左对齐。他写道，

Verse is usually set flush left and ragged right…. But to distinguish verse quotations from their surrounding prose, they should be (indented or) centered on the longest line (p. 41, parentheses mine).

注意在这个例子中最长的线"Jumped over the lazy dog."

的两边有十二个单位space

------------------------------------------------
|           The quick fox                      |
|           Jumped over the lazy dog           |
|           Lorem ipsum                        |
|           Ad infinitum                       |
------------------------------------------------
1          12          24          36          48

如何在 CSS 中做到这一点？

以下是我尝试过但不起作用的方法：

text-align: centered; 不是左对齐[=29=]
margin: auto; 段落的父项需要固定宽度（据我所知），然后块以恒定宽度而不是文本的动态宽度为中心。
我可以用 CSS 网格将块居中，但我仍然不知道如何根据最长的线的宽度来确定它的宽度。

Answer 1

假设你在文本中有 br 标签显示你的中断，你想要使用的是显示：table;

#banner-message span{
  margin: 0px auto;
  display: table;
}

<div id="banner-message">
  <span>
  The quick fox<br />
  Jumped over the lazy dog <br />
   Lorem Ipsum <br />
   Ad infinitum  
  </span>
</div>

Answer 2

我能够使用 flexbox 使元素居中，但如果我将 .container 设置为 display: grid，它也能正常工作。我只加了边框，方便验证。

.container {
  display: flex;  
  border: 1px solid black;    
}

.item {
  display: flex;
  margin: auto;
  border: 1px solid red;
}

<div class="container">
  <div class="item">
    <p>
      The quick fox<br>
      Jumped over the lazy dog<br>
      Lorem Ipsum<br>
      Ad infinitum
    </p>
  </div>
</div>

<div class="container">
  <div class="item">
    <p>
      The quick fox<br>
      Jumped over<br>
      the lazy dog<br>
      Lorem Ipsum<br>
      Ad infinitum
    </p>
  </div>
</div>

<div class="container">
  <div class="item">
    <p>
      The quick fox<br>
      Jumped over the lazy dog Lorem Ipsum<br>
      Ad infinitum
    </p>
  </div>
</div>

如何在 CSS 中最长的行上居中左对齐文本块？

How to center a flush-left text block on the longest line in CSS?

html

css

block

centering

quote