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

<p>я пытаюсь следовать очень простому примеру. используя страницу <a href="http://getbootstrap.com/css/#grid">starter и систему сетки</a> , я надеялся на следующее:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="row"> <div class="span12"> <h1>bootstrap starter template</h1> <p>example text.</p> </div> </div></code></pre> </div> </div> </p><p>... будет производить центрированный текст.</p><p>тем не менее, он все еще появляется в крайнем левом углу. что я делаю неправильно?</p>

<h2>это для центрирования текста (<em>о чем был вопрос</em>)</h2><p>для других типов контента, см. <a href="https://stackoverflow.com/a/13099189/2812842">ответ флавиена</a> .</p><p><strong>обновление: bootstrap 2.3.0+ ответ</strong></p><p>оригинальный ответ был для ранней версии начальной загрузки. начиная с версии 2.3.0, <strong>вы можете просто передать div классу <code>.text-center</code></strong>.</p><hr><p><strong>оригинальный ответ (до 2.3.0)</strong></p><p>вам нужно определить один из двух классов, <code>row</code> или <code>span12</code> с <code>text-align: center</code>. смотрите <a href="http://jsfiddle.net/xksuh/">http://jsfiddle.net/xksuh/</a> или <a href="http://jsfiddle.net/xksuh/1/">http://jsfiddle.net/xksuh/1/</a> </p>

<p>примечание: это было <a href="https://stackoverflow.com/questions/15265253/centering-the-pagination-in-bootstrap#comment29641329\_15265287">удалено в bootstrap 3</a> .</p><hr><p>в pre-bootstrap 3 вы можете использовать класс css <code>pagination-centered</code> следующим образом:</p><pre><code><div class="span12 pagination-centered"> centered content. </div> </code></pre><p>класс <code>pagination-centered</code> уже находится в bootstrap.css (или bootstrap.min.css) и имеет единственное правило:</p><pre><code>.pagination-centered{text-align:center;} </code></pre><p>с <strong>bootstrap 2.3.0.</strong> просто используйте класс <code>text-center</code></p>

<p>я предполагаю, что большинство людей здесь на самом деле ищут способ <em>центрировать всю <code>div</code></em>, а не только текстовое содержимое (что тривиально…).</p><p>второй способ (вместо использования text-align: center) для центрирования объектов в html - это элемент с фиксированной шириной и автоматическим полем (слева и справа). в bootstrap стиль, определяющий автоматические поля, - это класс «контейнер».</p><pre><code><div class="container"> <div class="span12"> "centered stuff there" </div> </div> </code></pre><p>посмотрите здесь на скрипку: <a href="http://jsfiddle.net/d2rlr/7788/">http://jsfiddle.net/d2rlr/7788/</a> </p>

<p><strong>bootstrap 3.1.1</strong> имеет класс <code>.center-block</code> для центрирования div. смотрите: <a href="http://getbootstrap.com/css/#helper-classes-center">http://getbootstrap.com/css/#helper-classes-center</a> .</p><blockquote> <blockquote> <p>центрирование блоков содержимого установите для элемента значение <code>display: block</code>, а для центра - через <code>margin</code>. доступный как mixin и класс.</p> </blockquote> </blockquote><pre><code><div class="center-block">...</div> </code></pre><p>или, как уже говорили другие, используйте класс <code>.text-center</code> для центрирования текста.</p>

<p>лучший способ сделать это - определить стиль css:</p><pre><code>.centered-text { text-align:center } </code></pre><p>затем, когда вам нужен центрированный текст, вы добавляете его так:</p><pre><code><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> </code></pre><p>или если вы просто хотите центрировать тег p:</p><pre><code><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> </code></pre><p>чем меньше встроенного css вы используете, тем лучше.</p>

<h2><strong>обновление 2018 - bootstrap 4</strong></h2><p>«центрированный контент» может означать много разных вещей, и центрирование bootstrap сильно изменилось с момента публикации.</p><h2><strong>горизонтальный центр</strong></h2><p><strong>bootstrap 3</strong></p><ul> <li><code>text-center</code> используется для элементов <code>display:inline</code></li> <li><code>center-block</code> к центру <code>display:block</code> элементов</li> <li><code>col-*offset-*</code> центрировать столбцы сетки</li> <li>увидеть <a href="https://stackoverflow.com/a/42735943/171456">этот ответ</a> центрировать навигационную панель</li> </ul><p> <a href="http://www.codeply.com/go/qffelxjfl6">demo bootstrap 3 горизонтальное центрирование</a> </p><p><strong>bootstrap 4</strong></p><ul> <li><code>text-center</code> все еще используется для элементов <code>display:inline</code></li> <li><code>mx-auto</code> заменяет <code>center-block</code> по центру <code>display:block</code> элементов</li> <li><code>offset-*</code> <em>или</em> <code>mx-auto</code> можно использовать для центрирования столбцов сетки</li> <li><code>justify-content-center</code> в <code>row</code> также можно использовать для центрирования <code>col-*</code> </li> </ul><p><code>mx-auto</code> (автоматические поля оси x) будет центрировать элементы <code>display:block</code> или <code>display:flex</code>, которые имеют <em>определенную ширину</em>, (<code>%</code>, <code>vw</code>, <code>px</code> и т. д.). <strong>flexbox используется по умолчанию</strong> для столбцов сетки, поэтому существуют также различные методы центрирования flexbox.</p><p> <a href="http://www.codeply.com/go/sosvvkploc"><strong>demo</strong> bootstrap 4 горизонтальное центрирование</a> </p><p><hr></p><h2><strong>вертикальный центр</strong></h2><p>теперь, когда bootstrap 4 по умолчанию является <strong>flexbox</strong>, существует множество различных подходов к вертикальному выравниванию с использованием: <a href="http://v4-alpha.getbootstrap.com/utilities/flexbox/#auto-margins">auto-margins</a> , <a href="http://v4-alpha.getbootstrap.com/utilities/flexbox/">flexbox utils</a> , или <a href="http://v4-alpha.getbootstrap.com/utilities/display-property/">display utils</a> наряду с <a href="http://v4-alpha.getbootstrap.com/utilities/vertical-align/">vertical выровняйте утилит</a> . поначалу «утилиты вертикального выравнивания» кажутся очевидными, но эти <em>только</em> работают с элементами отображения inline и table. вот несколько вариантов вертикальной центровки bootstrap 4.</p><hr><p><strong>1 - вертикальный центр с использованием авто полей:</strong></p><p>другой способ вертикального центрирования - использовать <code>my-auto</code>. это будет центрировать элемент внутри его контейнера. например, <code>h-100</code> делает строку полной высоты, а <code>my-auto</code> будет вертикально центрировать столбец <code>col-sm-12</code>.</p><pre><code><div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">card</div> </div> </div> </code></pre><p> <a href="http://www.codeply.com/go/akn5byxqwn">вертикальный центр с использованием авто полей <strong>демо</strong></a> </p><p><code>my-auto</code> представляет поля на вертикальной оси y и эквивалентно:</p><pre><code>margin-top: auto; margin-bottom: auto; </code></pre><hr><p><strong>2 - вертикальный центр с flexbox:</strong></p><p> <a href="https://i.stack.imgur.com/gkaki.png"> <img src="https://i.stack.imgur.com/gkaki.png" alt="vertical center grid columns"> </a> </p><p>поскольку bootstrap 4 <code>.row</code> теперь <code>display:flex</code>, вы можете просто использовать <code>align-self-center</code> в любом столбце, чтобы расположить его вертикально по центру ...</p><pre><code> <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> </code></pre><p>или используйте <code>align-items-center</code> для всего <code>.row</code>, чтобы выровнять по центру все <code>col-*</code> в строке по вертикали ...</p><pre><code> <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> </code></pre><p> <a href="http://www.codeply.com/go/gfggl4ys27">вертикальный центр столбцов разной высоты <strong>демо</strong></a> </p><hr><p><strong>3 - вертикальный центр, используя утилиты отображения:</strong></p><p>bootstrap 4 имеет <a href="https://v4-alpha.getbootstrap.com/utilities/display-property/">display utils</a> , которые можно использовать для <code>display:table</code>, <code>display:table-cell</code>, <code>display:inline</code> и т.д. они могут быть использованы с <a href="https://v4-alpha.getbootstrap.com/utilities/vertical-align/">вертикальными выравнивателями</a> для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.</p><pre><code><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> </code></pre><p> <a href="http://www.codeply.com/go/30dytbq83o">вертикальный центр с использованием утилиты отображения <strong>demo</strong></a> </p>

<p>по состоянию на февраль 2013 года в некоторых случаях я добавляю «центрированный» класс в div «span»:</p><pre><code><div class="container"> <div class="row"> <div class="span9 centred"> this div will be centred. </div> </div> </div> </code></pre><p>и в css:</p><pre><code>[class*="span"].centred { margin-left: auto; margin-right: auto; float: none; } </code></pre><p>причина этого заключается в том, что span * div перемещается влево, а метод центрирования "auto margin" работает только в том случае, если div не перемещается.</p><p>демо (на jsfiddle): <a href="http://jsfiddle.net/5rpsh/8/embedded/result/">http://jsfiddle.net/5rpsh/8/embedded/result/</a> </p><p>jsfiddle: <a href="http://jsfiddle.net/5rpsh/8/">http://jsfiddle.net/5rpsh/8/</a> </p>

<p>класс .show-grid применяет выравниваемый по центру текст в примере в ссылке.</p><p>вы всегда можете добавить <code>style="text-align:center"</code> к вашему row div или какому-нибудь другому классу, как мне кажется.</p>

<p>если вы используете bootstrap 3, он также имеет встроенный класс css с именем <strong>.text-center</strong>. это то, что ты хочешь.</p><pre><code><div class="text-left"> left </div> <div class="text-center"> center </div> <div class="text-right"> right </div> </code></pre><p>пожалуйста, посмотрите пример в jsfiddle. <a href="http://jsfiddle.net/ucheng/q4fue/">http://jsfiddle.net/ucheng/q4fue/</a> </p>

<p>bootstrap 2.3 имеет класс <code>text-center</code>. </p><pre><code><p class="text-left">left aligned text.</p> <p class="text-center">center aligned text.</p> <p class="text-right">right aligned text.</p> </code></pre>

<p>со своей стороны я определяю новые стили <code>css</code>, готовые к использованию и легко запоминающиеся:</p><pre><code>.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;} </code></pre><p>это хорошая идея? есть ли хорошая практика для этого?</p>

<p>если вы используете bootstrap 2.0+</p><p>это может сделать div по центру страницы.</p><pre><code><div class="row"> <div class="span4 offset4"> //your content here gets centered of the page </div> </div> </code></pre>

<p>любой вспомогательный класс выравнивания текста сделает свое дело. bootstrap уже давно использует класс <code>.text-center</code> для центрирования текста.</p><pre><code>.text-center { text-align: center !important; } </code></pre><p>или вы можете создавать свои собственные утилиты. некоторые варианты, которые я видел за эти годы:</p><pre><code>.u-text-center { text-align: center !important; } .ta-center { text-align: center !important; } .ta\:c { text-align: center !important; } </code></pre>

<p>вы должны настроить с помощью <code>.span</code>.</p><p>пример:</p><pre><code><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> </code></pre>

<p>мой предпочтительный метод для центрирования блоков информации при сохранении отзывчивости (совместимость с мобильными устройствами) заключается в размещении двух пустых <code>span1</code> делителей до и после содержимого, которое вы хотите центрировать.</p><pre><code><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--> </code></pre>

<p>для bootstrap версии 3.1.1 и выше лучшим классом для центрирования контента является вспомогательный класс <code>.center-block</code>.</p>

<p>вы можете использовать любой из следующих типов</p><ol> <li>используйте bootstrap существующего класса <code>text-center</code>.</li> <li>добавление собственного стиля, <code>style = "text-align:center"</code>.</li> <li><p>используйте смещение столбца:</p> <p>пример: <code><div class="col-md-offset-6 col-md-12"></div></code></p></li> </ol>

<p>центр-блок также вариант, не упомянутый в ответах выше</p><pre class="lang-html prettyprint-override"><code> <div class="center-block" style="width:200px;background-color:#ccc;">...</div> </code></pre><p>все, что делает класс <code>center-block</code>, это сообщает элементу, что его поле имеет значение 0 auto, а auto - это левые/правые поля. однако, если только класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает точки для выполнения этого автоматического вычисления, поэтому он не будет центрироваться, как ожидалось.</p><p>так что текстовый центр - лучший вариант.</p>

<pre><code><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> </code></pre><p>не используйте контейнер-жидкость в основном.</p>

<p>просто используйте класс text-center для div или тега, который вы хотите. я думаю, что это может работать нормально. это класс bootstrap для выравнивания текста по центру.</p><p>вот некоторые классы bootstrap для выравнивания текста:</p><pre><code>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> </code></pre>

<p>я попытался двумя способами, и это работало нормально, чтобы центрировать div. оба способа выровняют div на всех экранах.</p><p><strong>способ 1: использование push:</strong></p><pre><code><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> </code></pre><p><strong>способ 2: использование смещения:</strong></p><pre><code><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> </code></pre><p><strong>результат:</strong></p><p> <a href="https://i.stack.imgur.com/vpegx.png"> <img src="https://i.stack.imgur.com/vpegx.png" alt="enter image description here"> </a> </p><p><strong>объяснение</strong></p><p>bootstrap будет обозначать слева первый столбец указанного заполнения экрана. если мы используем смещение или толчок, это сместит столбец «this» на «эти» много столбцов. несмотря на то, что я столкнулся с некоторыми проблемами, связанными со смещением, push был потрясающим.</p>

<p><strong> обновление 2018: </strong></p><p>в <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">bootstrap 4.1.3</a> , контент может быть центрирован с помощью класса <code>mx-auto</code>.</p><pre><code><div class="mx-auto"> centered element </div> </code></pre><p>ссылка: <a href="https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering">https://getbootstrap.com/docs/4.1/utilities/spacing/#horizont-centering</a> </p>

<p>я создал этот класс, чтобы сохранить центрирование независимо от размера экрана при сохранении отзывчивых функций:</p><pre><code>.container { alignment-adjust: central; } </code></pre>