Susy如何在一个全宽度div中居中内容？

Question

Susy如何在一个全宽度div中居中内容？

3

我希望在保持div全屏宽度的同时，将内容居中。我的头部有一个重复x轴的背景图片，必须将其延伸到整个屏幕的长度并将内容居中。我知道可以添加一个div作为容器，如下面的示例所示，但这会向HTML中添加大量不语义化的标记。在我的项目中，wrapper中包含了susy容器。

<body>
  <div class="wrapper">
    <header>
      <div class="container">
         centered content goes here...
      </div>
    <header>
  </div>
<body>

有没有一种方法可以使用Susy完成这个操作，而无需额外的内部容器div。如果只是标题，那就没问题了，但我的标记需要在许多地方使用它。最终它看起来像任何CSS网格框架。

- aaronb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Miriam Suzanne · Accepted Answer

你有几个可行的选择。实际上，任何在CSS中可用的解决方案，你都可以使用Susy来帮助你。Susy容器并没有什么特别之处，使它与自己编写CSS不同。 Susy只是为你做了计算。

最健壮/明显的方法确实需要1个包装器，但是你的

元素可以很好地发挥这个作用，除了容器和标题之外，你不需要额外的div：

<header>
  <div class="container">
    content...
  </div>
</header>

我使用的另一种方法是使用生成的内容（仅使用标题）创建完整页面的背景。这要求您知道您的标题的高度：

header {
  @include container;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6em; // the height of your header.
  }
}

或者将body的overflow-x设置为hidden：

body { overflow-x: hidden; }

header {
  @include container;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

这可能需要一些z-index的调整才能正常工作。

如果你发现其他更好的CSS/HTML方法（我很想看到），并且你无法弄清如何让它与Susy配合使用，我很乐意为你演示。