居中段落，同时有边距以创建空白

Question

所以我试图将我的段落居中放置在页面中间，同时创建一些左右边距 "empty spaces"。

我的目标是将它放在类似文本框的样式中，并将其置于页面中央，同时在页面的左右两侧创建空列。我喜欢桌面模式下的内容，但它是 "stationary" 并且没有响应。当您在响应模式下调整浏览器大小时，它不会保持居中。这是我正在尝试实现的示例，如下面的快速草图和我的代码所示。

目标： 此外，当我将浏览器调整为移动设备时，我希望“文本框”开始填充边距，以便当您在 phone 或平板电脑上时它看起来可读。 奖励： 我想更改文本框任一侧的宽度或边距大小，以使其与我完整的其他内容一起看起来美观且均匀 html 文档。这只是我的 html 文档的一部分。

注意： 当您运行代码片段时，我建议您点击全页这样您就可以明白我在说什么，以便更容易理解。

.mainSummary {
  text-align: center;
  margin-left: 600px;
  margin-right: 600px;
}

<link rel="stylesheet" type="text/css" href="style.css">

<div class="mainSummary">
  <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus.
  </p>
</div>

Answer 1

灵活 + 自动边距可能有助于实现您的目标。

工作示例：https://codepen.io/cdtapay/pen/LqyaZx

.summary {
    display: flex;
}

.summary__content {
    padding: 1rem;
    background-color: lightblue; 
    border: 2px solid lightgreen; 
    border-radius: 10px; 
    text-align: center; 
    font-size: 22px;
    /* Set the desired max-width for mobile */
    max-width: 250px;
    margin: 0 auto;
 }

<div class="summary">
    <p class="summary__content">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
      praesentium voluptatum deleniti atque corrupti quos dolores et quas 
      molestias excepturi sint occaecati cupiditate non provident, similique 
      sunt in culpa qui officia deserunt mollitia.
    </p>
</div>

Answer 2

试试这个代码：

.mainSummary {
    margin-left: 100%;
    margin-right: 100%;
}

或者

.mainSummary {
    margin-left: auto;
    margin-right: auto;
}

Answer 3

试试这个。如果你没有 Bootstrap 4 那么 flex 将无法工作。所以没有flex，你可以试试这个。

.mainSummary {
  display:block;
  margin: 0 auto;
  text-align:center;
}

居中段落，同时有边距以创建空白

Center paragraph while having margins to create empty spaces

html

css

paragraph

responsive-design