Как получить центрированный контент с помощью Twitter Bootstrap?

484

Я пытаюсь выполнить очень простой пример. Используя начальную страницу и сетку, я надеялся на следующее:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... создаст центрированный текст.

Однако он все еще появляется в крайнем левом углу. Что я делаю неправильно?

  • 5
    Вы хотите, чтобы текст внутри <div class = "span12"> центрировался, или вы хотите, чтобы весь <div class = "row"> 'центрировался в окне браузера?
  • 0
    Обновите ссылку на twitter.github.com/bootstrap/scaffolding.html#gridSystem
Показать ещё 2 комментария

22 ответа

646
Лучший ответ

Это для централирования текста (о чем и был вопрос)

Для других типов контента см. ответ Flavien.

Обновление: Bootstrap 2.3.0+ Отвечать

Первоначальный ответ был для ранней версии бутстрапа. Начиная с bootstrap 2.3.0, вы можете просто дать div классу .text-center.


Оригинальный ответ (pre 2.3.0)

Вам нужно определить один из двух классов row или span12 с помощью text-align: center. См. http://jsfiddle.net/xKSUH/ или http://jsfiddle.net/xKSUH/1/

  • 1
    Я пробовал это как для row, так и для span12, но моя таблица внутри span12, внутри row всегда находится слева. Добавление отступов перемещает его в центр, но я хочу, чтобы он был в центре реагирования. Можно ли как-нибудь сделать автозаполнение?
  • 0
    Я вижу, что это работает, но зачем нам его определять. Они еще не определены? Я говорю только о тексте ....
Показать ещё 7 комментариев
227

ПРИМЕЧАНИЕ: это было удалено в Bootstrap 3.


Pre-Bootstrap 3, вы можете использовать класс CSS pagination-centered следующим образом:

<div class="span12 pagination-centered">
    Centered content.
</div>

Класс pagination-centered уже находится в bootstrap.css(или bootstrap.min.css) и имеет единственное правило:

.pagination-centered{text-align:center;}

С Bootstrap 2.3.0. просто используйте класс text-center

  • 41
    Я бы не предложил использовать это как очень специфичное для нумерации страниц (как следует из названия класса). Он может вступать в противоречие со стилями, применяемыми к нумерации страниц, и может быть несовместим с будущими обновлениями, если при начальной загрузке решится, что этот класс должен сделать больше для центрированной нумерации страниц.
  • 4
    @ lurii.k Это делает ВСЕ сосредоточенным, включая детей. Что, если мы просто хотим выровнять внешний контейнер, но все внутри него выровнять по левому краю?
Показать ещё 4 комментария
145

Я думаю, что большинство людей здесь ищут способ сосредоточить все div, а не только текстовое содержимое (что тривиально...).

Второй способ (вместо того, чтобы использовать text-align: center), чтобы центрировать вещи в HTML, состоит в том, чтобы иметь элемент с фиксированной шириной и автоматической маркой (слева и справа). С помощью Bootstrap стиль, определяющий автоматические поля, является классом "контейнер".

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Взгляните сюда на скрипку: http://jsfiddle.net/D2RLR/7788/

  • 9
    Это правильный ответ, официально зарегистрированный здесь: twitter.github.com/bootstrap/scaffolding.html#layouts
  • 2
    @Qlimax Ваша ссылка, кажется, не работает, я думаю, это то, что вы хотели для 2.3.2: getbootstrap.com/2.3.2/scaffolding.html#layouts
Показать ещё 5 комментариев
31

Bootstrap 3.1.1 имеет класс .center-block для центрирования div. См. http://getbootstrap.com/css/#helper-classes-center.

Блоки содержимого центра. Установите элемент display: block и центрируйте через margin. Доступно как mixin и класс.

<div class="center-block">...</div>

Или, как уже говорили другие, используйте класс .text-center для центра текста.

27

Лучший способ сделать это - определить стиль css:

.centered-text {
    text-align:center
}    

Затем, когда вам нужен центрированный текст, вы добавляете его так:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

или если вы хотите, чтобы p-тэг был центрирован:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

Чем меньше встроенных css вы используете, тем лучше.

  • 0
    Хорошо, я использовал это для центрирования кнопок в нижнем колонтитуле Bootstrap.
17

Обновление 2017 - бета-версия Bootstrap 4

"Центрированный контент" может означать много разных вещей, и центрирование Bootstrap сильно изменилось со времени первоначального сообщения.

Горизонтальный центр

Bootstrap 3

  • text-center используется для display:inline элементов
  • center-block в центр display:block элементов
  • col-*offset-* для столбцов центральной сетки
  • см. этот ответ, чтобы центрировать навигационную панель.

Демо-бутстрап 3 Горизонтальное центрирование

Bootstrap 4

  • text-center по-прежнему используется для display:inline элементов
  • mx-auto заменяет элементы center-block на центр display:block
  • offset-* или mx-auto можно использовать для центрирования столбцов сетки

mx-auto (авто-по оси оси) будет центрировать элементы display:block или display:flex, которые имеют определенную ширину (%, vw, px и т.д.). Flexbox используется по умолчанию на столбцах сетки, поэтому существуют также различные методы центровки flexbox.

Демо Bootstrap 4 Горизонтальное центрирование


Вертикальный центр

Теперь, когда Bootstrap 4 по умолчанию Flexbox, существует множество различных подходов к вертикальному выравниванию, используя: auto-margins, Flexbox utils или утилиты отображения наряду с вертикальным выравниванием utils. Сначала "вертикальные выравнивающие утилиты" кажутся очевидными, но они работают только с встроенными и табличными элементами отображения. Вот несколько вариантов вертикального центрирования Bootstrap 4.


1 - Вертикальный центр с использованием автоматических полей:

Другим способом вертикального центра является использование my-auto. Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально центрировать столбец col-sm-12.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Вертикальный центр с использованием автоматических полей Демо

my-auto представляет поля на вертикальной оси y и эквивалентен:

margin-top: auto;
margin-bottom: auto;

2 - Вертикальный центр с Flexbox:

Изображение 2306

Так как Bootstrap 4 .row теперь display:flex, вы можете просто использовать align-self-center для любого столбца, чтобы вертикально центрировать его...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

или, используйте align-items-center для всего .row для вертикального выравнивания по центру col-* в строке...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Вертикальный центр Различные столбцы высоты Демо


3 - Вертикальный центр с использованием экранных приложений:

Bootstrap 4 имеет display utils, который может использоваться для display:table, display:table-cell, display:inline и т.д. Это могут быть используется с настройками вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр с использованием экранных приложений Демо

  • 0
    При использовании Grid layout я обнаружил, что только следующая комбинация css будет горизонтально и вертикально выровнять div внутри столбца, чтобы максимальная высота столбца также соответствовала наибольшему столбцу в той же строке. .className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
  • 0
    Большое спасибо. Это решает мою проблему.
13

По состоянию на февраль 2013 года, в некоторых случаях, я добавляю "центрированный" класс в div "span":

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

и CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Причиной этого является то, что span * div получает float влево, а метод центрирования "автомаркировки" работает только в том случае, если div не плавает.

Демо (на JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

  • 2
    Это в рамках основы, хотя
  • 0
    Это включено в основу фонда, хотя
Показать ещё 1 комментарий
12

В классе .show-grid применяется текст с выравниванием по центру в примере в ссылке.

Вы всегда можете добавить style="text-align:center" в свой div или какой-нибудь другой класс, о котором я думаю.

  • 4
    добавление встроенных стилей, как это часто считается плохой практикой
  • 2
    Я согласен, и поэтому я также сказал "или какой-то другой класс" :)
9

Если вы используете Bootstrap 3, он также имеет встроенный CSS-класс с именем .text-center. Это то, что вы хотите.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

См. пример в jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

7

Bootstrap 2.3 имеет класс text-center.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
  • 0
    Нет, это работает только для текста, вопрос о главном контейнере
  • 0
    «Вопрос о главном контейнере». Я не понимаю, почему вы так утверждаете (и видите принятый ответ)
6

С моей стороны я определяю новые стили CSS, готовые к использованию и легко запоминающиеся:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

Это хорошая идея? Есть ли хорошая практика для этого?

  • 3
    скользкий склон. Предполагается, что CSS убирает проблемы стилей из структуры документа. Они, хотя и косвенно, добавляют их обратно. Может быть, TBS показывает плохой пример со своими span12 s и тому подобным
  • 0
    я думаю, что испуг и бегство не легко вспомнить
Показать ещё 1 комментарий
4

Если вы используете Bootstrap 2.0 +

Это может привести к тому, что div будет центрироваться на странице.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>
  • 11
    это не центрирует элемент. он помещает верхний левый угол элемента на 4 столбца вперед. центрирование означает помещение точного центра элемента в центр элемента контейнера.
3

Любой класс утилиты выравнивания текста будет делать трюк. Bootstrap уже давно использует класс .text-center для центрирования текста.

.text-center { text-align: center !important; }

Или вы можете создавать свои собственные утилиты. Некоторые вариации, которые я видел за эти годы:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
  • 3
    Не очень хороший дизайн, так как pull-left и pull-right влияют на элемент данного класса. Pull-center, как вы определяете, влияет на дочерние элементы элемента.
2

Для Bootstrap версии 3.1.1 и выше лучшим классом для центрирования содержимого является .center-block вспомогательный класс.

  • 0
    да, сейчас все темы и пользователи используют версии начальной загрузки более 3.1.1
2

Вам нужно настроить с помощью .span.

Пример:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>
2

Мой предпочтительный метод центрирования блоков информации при сохранении отзывчивости (мобильная совместимость) заключается в размещении двух пустых span1 div до и после содержимого, которое вы хотите центрировать.

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->
1

Вы можете использовать любой из следующих типов

  • Использовать существующий класс Bootstrap text-center.
  • Добавление пользовательского стиля style = "text-align:center".
  • Используйте смещение столбца:

    Пример: <div class="col-md-offset-6 col-md-12"></div>

1

Центр-блок также является опцией, не упомянутой в приведенных выше ответах.

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

Весь класс center-block заключается в том, чтобы указать элементу, имеющему маркер 0 auto, причем авто является левым/правым полям. Однако, если класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает точки для вычисления этого автоматического вычисления, поэтому он не будет центрировать себя так, как ожидалось.

Таким образом, текстовый центр является лучшим вариантом.

1
<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

Не используйте контейнерную жидкость в основном.

  • 0
    У вас есть centered класс в вашем коде, который создаст много путаницы
  • 0
    интересный подход, но для моего конкретного webform css, это был хороший вариант.
0

Я пробовал два пути, и он отлично работал, чтобы центрировать div. Оба способа выравнивают div на всех экранах.

Способ 1: Использование Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Способ 2: Использование смещения:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Результат:

Изображение 2318

Объяснение

Бутстрап будет обозначать слева, первый столбец указанного экрана. Если мы используем смещение или push, он сдвигает столбец 'this' на "те" многие столбцы. Хотя я столкнулся с некоторыми проблемами в реагировании смещения, толчок был потрясающим.

0

Просто используйте класс, text-center, для div или тега, который вы хотите. Я думаю, это может работать нормально. Это класс Bootstrap для центра выравнивания текста.

Вот несколько классов выравнивания текста:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>
0

Я создал этот класс, чтобы поддерживать центрирование независимо от размера экрана, сохраняя при этом отзывчивые функции:

.container {
    alignment-adjust: central;
}
  • 0
    Это не работает.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню