如何使用蓝图 css 框架使框居中

Question

我的_base.scss 包含以下内容

$blueprint-grid-columns: 12;
$blueprint-container-size: 750px;
$blueprint-grid-margin: 0px;
// Use this to calculate the width based on the total width.
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;

在我的页面中，我有一个 750 px 宽的大框

#big-box {
  @include container;
  background-color: #FFFFFF;
  margin-top: 15px;
  min-height: 550px;
}

在这个盒子里，我想要一个居中对齐的盒子，但我似乎无法完成。下面是我的代码

#login{
  @include container;
  margin-top: 15px;
  @include column(11);
  background-color: #F1F1F1;
}

我应该怎么做才能让#login 框在中间？

Image 现在的样子：

Answer 1

失败的原因是column mixin 不仅设置元素的宽度，而且还向左浮动并应用右边距（除非它是最后一列，没有边距）。 span 在内部由 column mixin 用于设置宽度。因此，您可以在此处使用span 来简单地设置宽度，而无需获取column 将添加的浮动和边距。

在此处查看指南针蓝图网格实现：
https://github.com/chriseppstein/compass/blob/stable/frameworks/blueprint/stylesheets/blueprint/_grid.scss

所以如果你使用span 而不是column，你就可以得到你想要的宽度。然后你可以申请margin: 0 auto; 来获得你想要的居中。 container 也设置了这一点，但通常您希望使用 container，因为它在蓝图中的预期，作为应用于顶级布局元素的样式。如果您只是自己应用边距，则不需要覆盖container 设置的网格宽度。

解决此问题的另一种“网格”方法是预先/附加列以将框推到中心。例如。如果你的布局是 19 宽，盒子是 11 宽，你可以 @include prepend(4); 在盒子的左侧添加 4 列宽度。

#login {
  // Don't include container.  In blueprint "container" means this is an outer
  // container for the grid, and has the grid width, centered on the page.
  // @include container;

  @include column(11);

  // I have no idea how many columns your page has, but if it had 19, 4 left columns 
  // would effectively center the div. | 4 + 11 + 4 |.
  // Adjust to your real layout.
  @include prepend(4);
}