Bootstrap center block: Twitter Bootstrap 3: How to center a block

Leave a Comment / Разное / By /

html — начальная загрузка «центральный блок» –

Задавать вопрос

спросил

Изменено 5 лет, 8 месяцев назад

Просмотрено 21к раз

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

------------------------------------------------
| |
| div снаружи |
| ---------------------------- |
| | | |
| | | |
| | div-внутри | |
| | | |
| | | |
| ---------------------------- |
| |
| |
--------------------------------------------------

Код:

 

     <дел >
      ....

Чтобы сделать внутренний div центром внешнего div, я использую. Это хорошо работает, если экран шире определенного числа, например 1000 пикселей, но если ширина экрана недостаточно велика, внутренний div будет примыкать справа от внешнего div:

----------------------------------------
| |
| div снаружи |
| ---------------------------- |
| | | |
| | | |
| слева | div-внутри | |
| маржа | | |
| | | |
| ---------------------------- |
| |
| |
-----------------------------------------

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

  • HTML
  • CSS
  • twitter-bootstrap

Ваш пример работает. Проблема в том, что макет не работает, если ширина экрана

меньше , чем 350px, потому что вы выбрали фиксированную ширину .

Demo

Если

должен все время центрироваться, используйте cols и offset :

 

    <дел>
        <дел>
            центр со смещением

Пример смещения

Дополнительная информация о смещении сетки Bootstrap.

1

Bootstrap .center-block не содержит ничего, кроме

 . center-block {
    дисплей: блок;
    поле справа: авто;
    поле слева: авто;
}

Должно быть что-то еще, добавляющее некоторые другие правила в ваш контейнер. В Инспекторе попробуйте проверить, из какого файла добавляется CSS (фиксированное левое поле), о котором вы говорите.

2

Я думаю, это то, что вы пытаетесь сделать.

 # приложение-макет-тело {
  высота: авто;
  поле: 0 авто;
  отступ: 25 пикселей;
  положение: родственник;
  граница: 5 пикселей сплошного красного цвета;
  выравнивание текста: по центру;
}
# div-регистр {
  граница: 5px сплошной зеленый цвет;
  отступ: 10 пикселей;
  фон: красный;
  белый цвет;
} 
 
<дел>
  <дел>
    
Я центрированный Div внутри другого центрированного Div..
      
Вопреки распространенному мнению, Lorem Ipsum — это не просто случайный текст.  Он уходит корнями в произведение классической латинской литературы 45 г. до н.э., то есть ему более 2000 лет. Ричард МакКлинток, профессор латыни в Хэмпден-Сиднейском колледже в Вирджинии, выглядел
        Подняв одно из наиболее малоизвестных латинских слов, consectetur, из отрывка Lorem Ipsum и просмотрев цитаты этого слова в классической литературе, я обнаружил несомненный источник. Lorem Ipsum происходит из разделов 1.10.32 и 1.10.33 "de Finibus
        Bonorum et Malorum» («Крайние пределы добра и зла») Цицерона, написанная в 45 г. до н. э. Эта книга представляет собой трактат по теории этики, очень популярный в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet ..", происходит от
        строка в разделе 1.10.32.
6

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

спросил

Изменено 6 лет, 1 месяц назад

Просмотрено 233 тысячи раз

Мне кажется, что центральный блок класса отсутствует в таблицах стилей начальной загрузки 3. Я что-то пропустил?

Его использование описано здесь, http://getbootstrap.com/css/#helper-classes-center

  • twitter-bootstrap-3
1

Это новое в версии Bootstrap 3.0.1, поэтому убедитесь, что у вас установлена ​​последняя версия (10/29)…

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

 
<дел>
    <дел>...