如何使用Blueprint CSS框架居中一个盒子

Question

如何使用Blueprint CSS框架居中一个盒子

3

我的_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像素

#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框处于中间位置？

现在的样子：

- Mike

1个回答

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

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

- numbers1311407 · Accepted Answer

这个失败的原因是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);
}