Susy 在全宽 div 中居中内容答案

【问题标题】：Susy center content within a full width divSusy 在全宽 div 中居中内容
【发布时间】：2017-04-24 14:14:20
【问题描述】：

我想将 div 中的内容居中，同时允许 div 占据屏幕的整个宽度。我在标题中有一个背景图像，它重复 x 并且必须在将内容居中时拉伸屏幕的整个长度。我知道我可以在下面的示例中添加一个 div 作为容器，但这会在 html 中添加很多非语义标记。 susy 容器包含已添加到我的项目中的包装器中。

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

有没有办法用 Susy 做到这一点，而不需要额外的内部容器 div。如果只是标题就好了，但我的标记在很多地方都需要这个。最后它看起来像任何 CSS 网格框架。

【问题讨论】：

标签： susy-compass

【解决方案1】：

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

最健壮/最明显的方法确实需要 1 个包装器，但您的 <header> 元素可以很好地发挥该作用，并且除了容器和标头之外，您不需要额外的 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.
  }
}

或将overflow-x设置为隐藏在你的身上：

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 一起工作，我很乐意向你展示。

【讨论】：

非常感谢您的帮助。后来我意识到由于我对网格缺乏了解，我错误地处理了这个问题。我找到了您的一篇帖子（gist.github.com/ericam/3077992）。我早上在玩这个，但没有成功。在我上班的路上发生了一个想法。上帝保佑我今晚回家时再试一次。正如你所说，有很多方法可以解决这个问题。我只是希望能学得最好。再次感谢。