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 mixin在内部使用column来设置宽度。因此，您可以在此使用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);
}

如何使用blueprint css框架使一个盒子居中

1 个答案: