如何居中 <ul> 文本左對齊並設置了最大寬度時的內容？

Question

編輯：我正在添加圖像以更好地傳達所需的結果：

[！[在此處輸入圖片描述] [1]] [1]

這是使說明變得清楚的小提琴： https : //jsfiddle.net/c7jazc9z/2/

我有一個無序列表，其中的項目左對齊。 我希望它以最長的項目為中心在屏幕上。 這可以通過display：inline-block輕松實現。

但是，我也想在此列表上設置最大寬度，這就是問題所在。 列表項換行時（由於寬度受限），右側會出現空白。

這樣看來，列表不在標題下方居中（盡管從技術上來說是這樣）。

如何解決呢？ （使用任何其他HTML元素都可以）

 body { background: gray; margin: 100px 0; text-align: center; } div { max-width: 300px; margin: 0 auto; } ul { background: pink; display: inline-block; list-style-type: none; padding: 0; text-align: left; } li { font-size: 24px; } 

 <div> <h1>Headline</h1> <ul> <li>This is a the longest line, at least here.</li> <li>This one's short.</li> <li>And this one so and so.</li> </ul> </div> 

Answer 1

這是你想要的嗎？

 body { background: gray; margin: 100px 0; text-align: center; } div { max-width: 300px; margin: 0 auto; } ul { background: pink; display: inline-block; list-style-type: none; padding: 0; text-align: left; } li { font-size: 24px; } 

 <div> <ul> <li> <center>This is a the longest line, at least here.</center> </li> <li> <center>This one's short.</center> </li> <li> <center>And this one so and so.</center> </li> </ul> </div>