it-swarm.com.ru

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

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

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

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

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

536
Hoa

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

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

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

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


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

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

671
ScottS

ПРИМЕЧАНИЕ: это было удалено в 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

239
Iurii.K

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

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

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

Посмотрите здесь на скрипку: http://jsfiddle.net/D2RLR/7788/

150
Flavien Volken

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 для центрирования текста.

36
cornishninja

Лучший способ сделать это - определить стиль 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 вы используете, тем лучше.

28
tomwolber

Обновление 2018 - Bootstrap 4

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

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

Bootstrap 3

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

Demo Bootstrap 3 Горизонтальное центрирование

Bootstrap 4

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

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

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


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

Теперь, когда Bootstrap 4 по умолчанию является flexbox, существует множество различных подходов к вертикальному выравниванию с использованием: auto-margins , flexbox utils , или display utils наряду с vertical выровняйте утилит . Поначалу «утилиты вертикального выравнивания» кажутся очевидными, но эти только работают с элементами отображения inline и table. Вот несколько вариантов вертикальной центровки 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:

 vertical center grid columns

Поскольку 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>

Вертикальный центр с использованием утилиты отображения Demo

28
Zim

По состоянию на февраль 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 перемещается влево, а метод центрирования "auto margin" работает только в том случае, если div не перемещается.

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

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

12
bjfletcher

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

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

12
PAULDAWG

Если вы используете 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/

9
ucheng

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>
8
leonbloy

Со своей стороны я определяю новые стили 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;}

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

6
Parisiam

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

Это может сделать div по центру страницы.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>
4
Sandeep

Любой вспомогательный класс выравнивания текста сделает свое дело. 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
nathanjessen

Вы должны настроить с помощью .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>
3
Praveen Das - PD

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

<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-->
2
Kilizo

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

2
Shwan Namiq

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

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

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

1
Poorna Rao

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

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

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

Так что текстовый центр - лучший вариант.

1
Black Mamba
<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>

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

1
Talha

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

Вот некоторые классы 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
shiva krishna

Я попытался двумя способами, и это работало нормально, чтобы центрировать 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>

Результат:

 Enter image description here

Объяснение

Bootstrap будет обозначать слева первый столбец указанного заполнения экрана. Если мы используем смещение или толчок, это сместит столбец «this» на «эти» много столбцов. Несмотря на то, что я столкнулся с некоторыми проблемами, связанными со смещением, Push был потрясающим.

0
Pikesh Prasoon

Обновление 2018:

В Bootstrap 4.1.3 , контент может быть центрирован с помощью класса mx-auto.

<div class="mx-auto">
  Centered element
</div>

Ссылка: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizont-centering

0
LinuxUser

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

.container {
    alignment-adjust: central;
}
0
Ariel