Как отцентрировать прямоугольник с помощью Blueprint CSS Framework - PullRequest
Новая
       31

Как отцентрировать прямоугольник с помощью Blueprint CSS Framework

3 голосов
/ 26 августа 2011

My _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 находилось посередине?

Изображение того, как оно выглядит сейчас:

1 Ответ

1 голос
/ 26 августа 2011

Причина, по которой это не удается, заключается в том, что column mixin не только устанавливает ширину элемента, но также плавает его влево и применяет правое поле (если это не последний столбец, который не имеет поля). span используется внутренне микшином column для установки ширины. Таким образом, вы можете использовать span здесь, чтобы просто установить ширину, не получая float и margin, которые добавит 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);
}
...