包装纸边缘不居中

问题描述 投票：0回答：1

我是编码新手。我正在尝试使用 CSS 中的 .wrapper 将我的正文内容居中。 CSS 边框、颜色等已显示，但我似乎无法使内容居中。

这就是我正在尝试的：

.wrapper {
    max-width: 1280px;
    background-color: beige;
    margin: 0 auto;
    border: 1px solid black;}

我知道我可能可以使用其他方法使包装纸居中，但这在理论上不应该起作用吗？哈哈

css margin wrapper center
1个回答
0
投票

好的！，您想要将 div.wrapper 水平和垂直居中。 您可以使用 CSS Flex 属性。

 .parent {
      height : 120px;
      border: 1px solid black;
      display:flex;
      justify-content:center; /* Align horizontally  */
      align-items:center; /* Align vertically */
  }
  .wrapper {
      max-width: 720px;
      background-color: beige;
      border: 1px solid black;
  }
<!DOCTYPE html>
<html>
  <body>

  <div class="parent">
      <div class="wrapper">
        The content of the body element is displayed in your browser.
      </div>
  </div>

  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.