如何使用蓝图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盒子在中间?

现在的样子:

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);
}