Twitter Bootstrap 3: Как центрировать блок

Ответ 1

Это новое в выпуске Bootstrap 3.0.1, поэтому убедитесь, что у вас есть последний (10/29)...

Демо: http://bootply.com/91632

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>

Ответ 2

Он работает намного лучше (сохраняя отзывчивость):

  <!-- somewhere deep start -->
  <div class="row">
    <div class="center-block col-md-4" style="float: none; background-color: grey">
      Hi there!
    </div>
  </div>
  <!-- somewhere deep end -->

http://www.bootply.com/0L5rBI2taZ

Ответ 3

Вы должны использовать style = "width: value" с классом центрального блока

Ответ 4

центр-блок можно найти в бутстрапе 3.0 в utilities.less в строке 12 и mixins.less в строке 39

Ответ 5

У меня возникли проблемы с его применением. Убедитесь, что вы обновили, как сказал Скелли. Вы также можете использовать класс текстового центра. Это может служить вашим целям.

Ответ 6

Несколько ответов здесь кажутся неполными. Вот несколько вариантов:

<style>
.box {
    height: 200px;
    width: 200px;
    border: 4px solid gray;
}
</style>    

<!-- This works: .container>.row>.center-block.box -->
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This does not work -->    
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This is the hybrid solution from other answers:
     .container>.row>.col-xs-6>.center-block.box
 -->   
<div class="container">
        <div class="row">
            <div class="col-xs-6 bg-info">
                <div class="center-block bg-primary box">This div is centered with .center-block</div>
            </div>
        </div>
    </div>

Чтобы заставить его работать с классами col *, вам нужно обернуть .center-block внутри класса .col- *, но не забудьте добавить еще один класс, который устанавливает ширину (.box в этом случае), или для изменения самого центра .center-блока, указав его ширину.

Проверьте это на bootply.

Ответ 7

center-block - плохая идея, поскольку она охватывает часть вашего экрана, и вы не можете нажимать на свои поля или кнопки. col-md-offset-? - лучший вариант.

Использовать col-md-offset-3 лучше, если класс col-sm-6. Просто измените число, чтобы центрировать ваш блок.

Ответ 8

Вы можете использовать класс .center-block в комбинации с style="width:400px;max-width:100%;", чтобы сохранить отзывчивость.

Использование класса .col-md-* с .center-block не будет работать из-за float на .col-md-*.

Ответ 9

Каков ваш вопрос, точно?

Класс center-block, как вы можете видеть из источника файлы, вызывающие свой связанный mixin, center-block(). Итак, все это:)

Вы подтвердили, что не переопределяете класс другими правилами, не связанными с центрированием?