Як отримати концентрований вміст за допомогою Twitter Bootstrap?

Я намагаюся наслідувати дуже основний приклад. Користуючись початковою сторінкою та сітковою системою , я сподівався на таке:

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

... створював би текст, що зосереджений.

Однак він все ще з’являється в крайній лівій частині. Що я роблю неправильно?

Це для центрування текстів (про що йшлося в питанні )

Інші типи вмісту див. У відповідь Флавієна .

Оновлення: Bootstrap 2.3.0+ відповідь

Оригінальна відповідь була для ранньої версії завантажувального пристрою. Станом на bootstrap 2.3.0, ви можете просто дати класу div.text-center .

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

Потрібно визначити один із двох класів rowабо span12з a text-align: center. Дивіться http://jsfiddle.net/xKSUH/ або http://jsfiddle.net/xKSUH/1/

ПРИМІТКА. Це було видалено в Bootstrap 3 .

Перед початком завантаження 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

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

Другий спосіб (замість використання текстового вирівнювання: центр) для центрування речей у HTML - це створення елемента з фіксованою шириною та автоматичним полем (ліворуч та праворуч). У Bootstrap стиль, що визначає автоматичні поля, є класом "контейнер".

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

Ознайомтесь тут на загадку: http://jsfiddle.net/D2RLR/7788/

Оновлення 2019 - Bootstrap 4

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

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

Завантаження 3

• text-centerвикористовується для display:inlineелементів
• center-blockдо центральних display:blockелементів
• col-*offset-* до центру сітки стовпців
• дивіться цю відповідь, щоб зосереджувати панель навігації

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

Завантаження 4

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

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

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

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

Тепер, коли Bootstrap 4 за замовчуванням є flexbox, існує багато різних підходів до вертикального вирівнювання, використовуючи: автоматичні поля , утиліти flexbox або утиліти відображення разом з утилітами вертикального вирівнювання . Спочатку "утиліти вертикального вирівнювання" здаються очевидними, але вони працюють лише з елементами відображення вбудованого та таблиці. Ось кілька варіантів вертикального центрування 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 представляє поля на вертикальній осі у і еквівалентно:

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

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

Оскільки 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 - Вертикальний центр за допомогою утилітів відображення:

Бутстрап 4 має дисплей утиліти , які можуть бути використані для 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

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

Центральні блоки вмісту Встановіть елемент у display: blockцентр та за допомогою центру margin. Доступний у вигляді міксину та класу.

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

Або, як уже говорили інші, використовуйте .text-centerклас для центрування тексту.

Найкращий спосіб зробити це - визначити стиль 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 ви використовуєте, тим краще.

Клас .show-grid застосовує текст, орієнтований на центр, у прикладі за посиланням.

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

Станом на лютий 2013 року в деяких випадках я додаю клас "по центру" до "span" div:

<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;
}

Причина цього полягає в тому, що проміжок * Div пропливає ліворуч, а техніка центрування «автоматичного поля» працює лише в тому випадку, якщо div не плаває.

Демонстрація (на JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

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

Якщо ви використовуєте 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/

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>

З мого боку я визначаю нові 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;}

Це гарна ідея? Чи є для цього хороша практика?

Якщо ви використовуєте Bootstrap 2.0+

Це може зробити діва зосередженим на сторінці.

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

Будь-який клас утиліти вирівнювання тексту зробив би свою справу. 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; }

Вам потрібно підкоригуватися за допомогою .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>

Моїм кращим способом центрування блоків інформації при збереженні чуйності (мобільної сумісності) є розміщення двох порожніх 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-->

Для Bootstrap версії 3.1.1 і вище, найкращим класом для центрування вмісту є .center-blockклас помічників.

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

Не використовуйте контейнер-рідина в основному.

Центр-блок також є варіантом, не вказаним у вищезазначених відповідях

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

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

Тож текстовий центр - кращий варіант.

Ви можете використовувати будь-який із наведених нижче типів

1. Використовуйте наявний клас Bootstrap text-center.
2. Додавання власного стилю style = "text-align:center".

3. Використання зміщення стовпця:

   Приклад: <div class="col-md-offset-6 col-md-12"></div>

Я створив цей клас для збереження по центру незалежно від розміру екрана, зберігаючи чуйні функції:

.container {
    alignment-adjust: central;
}

Просто скористайтеся класом, текстовим центром, для потрібного 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>

Я спробував двома способами, і це чудово спрацювало, щоб зосереджувати діва. Обидва способи вирівняють знаки на всіх екранах.

Спосіб 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>

Результат:

Пояснення

Bootstrap позначатиме ліворуч, перший стовпець вказаної зайнятості екрана. Якщо ми будемо використовувати зсув або натиснути, він змістить "цей" стовпчик на "ці" багато стовпців. Хоча я зіткнувся з деякими проблемами у реакції компенсації, натиск був приголомшливим.

Оновлення 2018 року:

У Bootstrap 4.1.3 вміст може бути зосереджено за допомогою класу mx-auto.

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

Довідка: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering