保证金：自动中心段落出现在中心外

发布于 2025-01-31 18:42:40 字数 2055 浏览 1 评论 0原文

我正在一个简单的网站上工作，需要将一个与标题对齐的段落中心，如下以下的屏幕截图 -

但是，尝试所有绝对，弯曲和边距：自动中心（这是我最终到达的），不同的宽度，元素（p，div等）在理论上是浏览器中的（相等的边距在每一侧），但似乎并不是因为我认为段落的包装方式。

发生（在两个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>

太感谢了！

原文

i am working on a simple site and i need to center a paragraph aligned with the header as in the screenshot below -

ideal alignment

however, trying all of absolute, flex and margin: auto center (which was what I finally arrived at), different widths, elements (p, div, etc), in browser it theoretically IS centered (equal margins on each side) but appears not to be because of, i think, the way the paragraph is wrapping.

alignment occuring (in both iOS simulator as well as chrome)

is there any solution to this? i dont want to center align the text itself but just the block.

here is my code, i replaced my original code with an example but i maintained as much of the original code that i believe to be relevant as possible.

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

thank you so much!

分享到QQ

分享到微博