边距：自动居中段落出现偏离中心

Question

我正在一个简单的网站上工作，我需要将与 header 对齐的段落居中，如下面的屏幕截图所示 -

ideal alignment

然而，尝试所有的绝对、弹性和边距：自动居中（这是我最终得到的）、不同的宽度、元素（p、div 等），在浏览器中它理论上是居中的（每一边的边距相等）但我认为这似乎不是因为段落的环绕方式。

alignment occuring（在 iOS 模拟器和 chrome 中）

有什么解决办法吗？我不想让文本本身居中对齐，而只是让块居中对齐。

这是我的代码，我用一个示例替换了我的原始代码，但我尽可能多地保留了我认为相关的原始代码。

<html lang="en">
  <head>
    <title>Example</title>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <style>
      html {
        background-color: black;
        font-family: "Space Mono", monospace;
        color: white;
        font-weight: bold;
      }

      body {
        margin: 0;
        font-size: 12px;
      }

      html,
      body {
        height: 100%;
        letter-spacing: 0.864px;
      }
    
      p {
        font-size: 12px;
        padding: 0;
      }
    
      .header-wrapper {
        text-align: center;
      }

      .desc p {
        font-size: 12px;
      }

      .desc-wrapper {
        margin: auto;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="header-wrapper">
        <h1>Example</h1>
      </div>
    </header>
    <article class="desc">
      <div class="desc-wrapper" style="text-transform: uppercase">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco.
      </div>
    </article>
  </body>
</html>

非常感谢！

Answer 1

您可以将段落的 text-justify 设置为 justify。这增加了单词之间的间距，以便文本的每一行都将跨越整个段落的宽度。

Answer 2

如您所述，这是由段落的换行方式造成的。

为了解决段落末尾的空格，我建议：

解决方案一：

调整 .desc-wrapper 的宽度，直到适合最后一个字符。因此，在示例中，您提供的宽度为 291px 就可以了。

方案二： 将 text-align: justify; 添加到 .desc-wrapper class，这将使文本对齐以适应 div 的宽度。

边距：自动居中段落出现偏离中心

margin: auto center paragraph appears off center

html

css

width

ios