Bootstrap 4 выравнивание по горизонтали: Bootstrap 4 центровое вертикальное и горизонтальное выравнивание

Содержание

Bootstrap 4 по центру вертикального и горизонтального выравнивания

Обновление 2019 — Bootstrap 4.3.1

Там нет необходимости для дополнительного CSS . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (ы) формы в полный рост . Bootstrap 4 теперь имеет h-100класс для 100% роста …

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

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

высота контейнера с пунктом (пунктами) по центру должна составлять 100%
(или независимо от желаемой высоты относительно центрального элемента)

Примечание. При использовании height:100%( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах height:100vh;вместо %получения желаемой высоты могут использоваться единицы vh .

Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.

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

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

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану

twitter-bootstrap-3 — Bootstrap col-sm-4 выравнивание текста по вертикали

У меня проблема с вертикальным выравниванием текста в div col-sm-4. Как видите, текст не выравнивается по вертикали. Как это решить?

Вот мой html-код

<div>
  <div>
    <h2> HOW NIBOOK WORKS</h2>
    <div><img src="img/Profile.png">
      <h2>Become a "NI"booker</h2>
      <h3>Create your profile and start sharing your skills and services to locals</h3>
    </div>
    <div><img src="img/bookmark.png">
      <h2>Get booked from locals</h2>
      <h3>Meet in your convenient place to provide your talent</h3>
    </div>
    <div><img src="img/page.png">
      <h2>Receive your money</h2>
      <h3>Get your money directly to your account</h3>
    </div>
  </div>
</div>

И мой css

.how-it-works-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 18px;
	margin: 25px 0 15px;
	text-align: center;
	padding-top: 10px;
}
.how-it-works-subtitle {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 18px;
	margin: 25px 0 15px;
	text-align: center;
	padding-top: 10px;
	font-weight: lighter;
	padding-bottom: 10px;
}
.how-it-works-step-icon {
	display: block;
	margin: auto;
}
.section-title {
	font-size: 28px;
	font-color: #4C535D;
	font-weight: bold;
	line-height: 18px;
	margin: 0;
	padding-top: 50px;
	padding-bottom: 60px;
	text-align: center;
	text-transform: uppercase;
}
.section-subtitle {
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 1.5px;
	margin: 10px 0 0 0;
	text-align: center;
}

Я новичок в bootstrap, css и т. Д., Поэтому прошу прощения, если это вопрос для очень новичков

-1

ChinaXiaoHong

1 Сен 2016 в 07:13

2 ответа

Лучший ответ

Вот окончательный результат со всеми изображениями, выровненными по вертикали, только одна проблема с вами — это размер изображений, который я скопировал все, что вы кодируете, и изменяю размер изображений до одинакового размера 88 пикселей * 87 пикселей, и все работает нормально. Я провел линию через изображения для справки, все они выровнены по вертикали

Mirza Obaid
1 Сен 2016 в 05:04

Попробуйте установить одинаковый размер для ваших изображений, т.е. profile.img , bookmarkg.png , page.png похоже, что ваши изображения имеют другой размер, также в качестве альтернативы вы можете использовать шрифты font-awesome вместо использования этих изображений

Mohit Arora
1 Сен 2016 в 04:21

html — Центр выравнивания по вертикали в Bootstrap 4

Важно! Вертикальный центр относительно высота родителя

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенной высоты , ни одного из вертикальные решения для центрирования будут работать!

Теперь перейдем к центру по вертикали в Bootstrap 4 …

Вы можете использовать новые flexbox & size utilities , чтобы сделать container полной высоты и display: flex. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (то есть: html, body) должно быть 100% ).

Вариант 1 align-self-center для flexbox child

<div>
    <div>
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Вариант 2 align-items-center для flexbox parent (.row равен display:flex; flex-direction:row)

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Вариант 3 justify-content-center на flexbox parent (.card равен display:flex;flex-direction:column)

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты , существует много подходов к вертикальному выравниванию. http://www.codeply.com/go/WG15ZWC4lf

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

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

<div>
    <div>
        <div>Card</div>
    </div>
</div>

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

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

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

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

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

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

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

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

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

см. Это Q/A по центру, но поддерживать равную высоту

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

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

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

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

Больше примеров
Вертикальное центральное изображение в <div>
Вертикальный центр .row in .container
Вертикальный центр и низ в <div>
Вертикальный центр ребенка внутри родителя
вертикальный центр полноэкранного jumbotron

Важно! Я упоминал высоту?

Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS …

body,html {
  height: 100%;
}

Или используйте min-height: 100vh для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту .

Также см:
Вертикальное выравнивание в bootstrap 4
Bootstrap 4 по центру по вертикали и горизонтали

Обзор инструментов Bootstrap для создания адаптивного сайта

Создать простой сайт можно «с нуля», используя для визуализации валидную верстку HTML и стили оформления CSS, а для интерактивности язык программирования JavaScript.

В более сложных сайтах, где требуется программировать логику и хранить большие объемы данных с быстрым доступом к ним, используются языки программирования Php, Python, Ruby или др. в связке с базами данных (например, MySQL), работающих на языке программирования SQL.

Делать сайт самостоятельно без готовой основы долго и дорого. Пока делается такой сайт, он может уже морально устареть и ресурсы будут потрачены впустую.

CMS и фреймворки

Ускорить и упростить создание сайта позволяют системы управления контентом сайта CMS. Например, «1С-Битрикс: Управление сайтом», которая имеет административную панель и огромный функционал с возможностью доработки. Использование CMS целесообразно для типовых проектов — это корпоративные сайты, интернет-магазины, информационные сайты, лендинги.

Если проект нетиповой и сложный, например, портал для взаимодействия поставщиков и покупателей или сайт со связанным мобильным приложением, то стоит задуматься о веб-фреймворках. Таких, как: Angular, Laravel, Symfony, React или др. В этом случае будет меньше ограничений от CMS и писать код будет удобнее, однако стоимость проекта выйдет сильно выше.

Итак мы подошли к такому понятию, как «фреймворк» — это программная оболочка, позволяющая упростить и ускорить решение типовых задач, характерных для определенного языка программирования.

Фре́ймворк (иногда фреймво́рк; англицизм, неологизм от framework — остов, каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

Интерфейсный фреймворк Bootstrap

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

Первоначально созданный дизайнером и разработчиком в Twitter,
Bootstrap («бутстрап») стал одним из самых популярных интерфейсных фреймворков и проектов с открытым исходным кодом в мире. Bootstrap распространяется под лицензией
MIT — бесплатная лицензия, требующая только сохранения авторских прав и лицензионных уведомлений.

Из нашей практики, самые популярные версии Bootstrap — 3 (v3.4.1) и 4 ( v4.6.x), именно на основе этих версий сделана основная масса сайтов. На момент написания статьи уже выпущена предварительная 5 версия для тестирования (v5.0.0-beta2).

Ранее упомянутая платформа «1С-Битрикс: Управление сайтом» использует тот же Bootstrap 3 и 4 версий во многих шаблонах своих компонентов. Это позволяет сократить код и упрощает его поддержку и развитие.

Коротко о плюсах фреймворка Bootstrap:

Высокая скорость разработки: фактически вы не пишете полного кода, а просто указываете какие компоненты и утилиты вам необходимы и в каком виде они должны быть на сайте.

Кроссбраузерность: сайт будет одинаково выглядеть на разных браузерах.

Адаптивность: сайт будет масштабироваться под размер экрана, на котором его просматривают.

Открытый код и кастомизация: можно гибко изменять код библиотек фреймворка.

Простота: создание страниц не требует экспертного знания HTML и CSS, используя компоненты даже начинающий разработчик сможет сверстать сайт.

Документация: все возможности документированы и не требуется их отдельно описывать для проектов.

Наша компания является сертифицированным партнером «1С-Битрикс» и разрабатывает сайты на платформе «1С-Битрикс: Управление сайтом». А для корректного и удобного отображения сайтов на дисплеях любых размеров и пропорций (адаптивности) мы используем верстку и front-end (клиентское программирование) на основе фреймворка Bootstrap 3 и 4 версий, либо используем flex на HTML 5, если Bootstrap для проекта избыточен.

Что входит в Bootstrap

Bootstrap — это интерфейсный фреймворк HTML, CSS и JavaScript, который содержит набор готовых блоков, классов и внутренних функций для быстрой и удобной разработки. Для его использования необходимы базовые знания языка разметки HTML, каскадных таблиц стилей CSS и языка программирования JavaScript.

Bootstrap включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Далее условно разделим материал на четыре блока: разметка, содержание, компоненты и утилиты.

Разметка

Базовым элементом Bootstrap является контейнер, в котором мы размещаем необходимое нам содержимое (тексты, изображения, таблицы, формы и т. п.). Контейнеры мы размещаем в стандартной сеточной системе — это система из 12 колонок (столбцов), которые подстраиваются под ширину экрана.

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

Более наглядно можно увидеть на скриншоте с официального сайта Bootstrap 4.6 (
https://bootstrap-4.ru/docs/4.6/getting-started/introduction/):

Таким образом, вы можете создавать различные комбинации рядов и столбцов:

Что еще вы можете:

Выравнивать столбцы по вертикали:

Выравнивать столбцы по горизонтали:

Изменять визуальный порядок контента:

Смещать и отодвигать столбцы:

Вкладывать ряды и столбцы:

С нюансами работы с рядами и колонками вы можете ознакомиться на официальном сайте Bootstrap:

Содержание

Типографика

В Bootstrap вы можете использовать классы заголовков h2-h6 для стилизации текста:

Возможность стилизации вторичного текста заголовка:

Создание параграфа, отстоящего от основной массы:

Изменение стилей начертания и выделения текста:

Стилизация показа аббревиатур:

Стилизация цитат, их источников и выравнивание:

С нюансами работы с текстом вы можете ознакомиться на официальном сайте Bootstrap:

Изображения

Изображения могут масштабироваться по родительскому элементу:

Стилизация эскизов — добавляется граница в 1 пиксель:

Стилизация и выравнивание изображений:

С нюансами работы с изображениями вы можете ознакомиться на официальном сайте Bootstrap:

Таблицы

Добавляйте базовый класс .table к любому тегу table и расширяйте его с помощью пользовательских стилей или различных включенных классов модификаторов.

Инвертируйте цвета со светлых на темные с помощью .table-dark и .thead-dark:

Разделяйте «полосками зебры» с помощью .table-striped:

Создавайте таблицы с границами с помощью .table-bordered и без границ с .table-borderless, комбинируйте с другими классами:

Создавайте маленькие таблицы с помощью класса .table-sm:

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

Позвольте таблицам прокручиваться горизонтально с помощью класса .table-responsive или задайте ширину экрана, на котором данное свойство будет появляться с помощью .table-responsive{-sm|-md|-lg|-xl}:

Компоненты

Уведомления

Уведомления доступны для любой длины текста и опциональных кнопок уведомлений. Для стилизации можно использовать контекстуальные классы (например, .alert-success). А для соответствия цвета ссылок цветам уведомлений используйте .alert-link:

В уведомлениях вы можете добавить «крестик» для его закрытия и класс .alert-dismissible, который разместит кнопку «крестика» (класс .close) и создаст дополнительный отступ справа. В «крестике» отмены добавьте атрибут data-dismiss=«alert» запускающий функциональность JavaScript. Также вы можете применить анимацию, используя классы .fade и .show:

Значки

Значки — это маленькие компоненты отображающие числа и ярлыки. Для их использования существует класс .badge. В практике они изменяют размер для подстроки к размеру непосредственного родительского элемента. Также вы можете применять один из 8 контекстуальных классов (например, .badge-primary и другие) и скруглять значки используя класс-модификатор .badge-pill:

Вы можете сделать значки активными используя контекстуальные классы .badge-* в элементе a:

Навигационная цепочка

Вы можете указать местоположение текущей страницы в иерархии сайта используя компонент .breadcrumb:

Кнопки

Обычно класс .btn используется вместе с тегом button, однако их также можно использовать с тегами input. Вы можете менять стили кнопок, их размеры и функциональность:

В кнопках присутствуют контекстуальные классы:

Делайте кнопки контурными используя класс .btn-outline-*:

Используя классы .btn-lg и .btn-sm меняйте размер кнопки:

Класс .btn-block создает кнопку на всю ширину родительского элемента.

Вы можете отключать кнопки, путем добавления атрибута disabled

Для того, чтобы это срабатывало в теге, нужно добавить не атрибут, а класс .disabled.

Группируйте кнопки используя класс .btn-group:

Добавляйте вложенность групп кнопок, например, для добавления выпадающего меню к ряду кнопок:

Есть возможность сделать вертикальное расположение:

Добавляйте информеры используя data-toggle=«popover»:

Карточки

Card — это компонент Bootstrap 4, который позволяет оформить контент в виде карточки.

Карточка имеет гибкую структуру. Это означает, что её можно представить по-разному, например:

С заголовком (футером) или без него.

С использованием картинки (её можно расположить в верхней или нижней части) или без неё.

С произвольным количеством элементов и их расположением в основной части.

Кроме этого, карточке можно ещё очень просто придать нужное цветовое оформление. Задать ей необходимый цвет фона, текста и границ.

В карточку можно добавлять абсолютно разнообразное содержимое:

Карточки не имеют определенной ширины. Вы можете оборачивать их столбцами и рядами:

Добавляйте элементы навигации в заголовок карточки:

Меняйте цвет фона и границы используя контекстуальные классы и атрибут border-color.

Карусель

Карусель — это блок, перелистывающий слайды с различным содержимым. На карусель могут быть добавлены элементы управления (стрелки) и индикаторы:

Также вы можете добавить надписи, изменить анимацию и интервал перехода на следующий слайд, добавив блоки с классами .carousel-fade и .carousel-caption.

Сворачивание

Для работы данного компонента используется класс .collapse. Он служит для отображения и скрытия контента, при нажатии на кнопку или ссылку. При нажатии могут отображаться сразу несколько элементов:

Также можно создать аккордеон, используя одноименный класс .accordion (в примере, с использованием компонента карточки):

Выпадающие элементы

Выпадающий список — это элемент интерфейса, обычно представляющий собой некоторое меню, которое показывается только после того, как пользователь нажал на некоторый элемент или навёл на него курсор. В качестве содержимого выпадающих элементов вы можете использовать ссылки и кнопки.

Вы можете менять размеры кнопок, выбирать направление выпадающего списка, активировать/деактивировать элементы списка, выравнивать меню в зависимости от устройства, добавлять разделители, текст и формы.

Формы

Изменяйте размерность форм используя классы .form-control-lg и .form-control-sm:

Устанавливайте горизонтальные прокручиваемые входы диапазона:

Добавляйте чекбоксы и радиокнопки:

Более сложные группы форм можно создавать с помощью системы сеток:

Используйте всплывающие подсказки:

Добавляйте выключатели:

Добавляйте формы загрузки файлов:

Jumbotron

Компонент Jumbotron предназначен для создания контента или информации на веб-сайте, который занимает всю ширину контейнера и является очень большим, чтобы пользователи обратили на него внимание:

Медиа-объекты

Медиа-объект — это элемент Bootstrap, который является основой для построения на сайте сложных блоков (комментариев, отзывов и др.). Один комментарий или отзыв в этом сложном блоке — это один медиа-объект. Также медиа-объекты могут быть вложенными:

Модальные окна

Компонент Modal на веб-странице может применяться для решения большого круга задач. Например, он может использоваться для отображения регистрационной формы пользователю, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте или чего-то другого.

Используйте сетку в модальных окнах:

Навигационная панель

Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.

На скриншоте мы видим класс .navbar brand, который обычно применяется для установки логотипа компании со ссылкой на главную страницу.

Также навигационная панель может содержать текст:

Вы можете центрировать навигационную панель на странице, добавив .navbar в контейнер:

Фиксируйте навигационную панель вверху и внизу:

Прогрессбар

Класс .progress используется как обертка для индикации максимального значения, а класс .progress-bar для индикации пройденного прогресса.

Отслеживание прокрутки

Вы можете отслеживать прокрутку используя data-spy=«scroll»:

Спиннеры

Состояние загрузки можно указывать с помощью спиннеров:

Вы можете устанавливать цвета и размеры спиннеров, регулировать отступы и размещение. Также есть возможность использовать спиннеры внутри кнопок:

Всплывающие сообщения

Всплывающие сообщения — это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.

Если сообщений несколько, то они будут размещаться вертикально друг под другом.

Также можно размещать всплывающие сообщения используя параметры CSS:

Утилиты

Границы

Утилиты границ могут использоваться для любых элементов:

Изменяйте цвета границ:

Можно изменить углы:

Отображение элементов

Изменяйте значение свойства display с помощью классов отображения. Классы называются по формату:

.d-{value} для xs

.d-{breakpoint}-{value} для sm, md, lg и xl.

Где value — это одно из:

none

inline

inline-block

block

table

table-cell

table-row

flex

inline-flex

Пример использования:

Встраивание

Встраивайте видео в контент с сохранением соотношения сторон для любого устройства. Правила применяются прямо для элементов iframe, embed, video и object.

Flex

С полным набором гибких утилит flexbox вы можете управлять компоновкой выравниванием и калибровкой столбцов сетки, навигации, компонентов и т. д.

Можно задавать направление гибких элементов:

Выравнивайте содержимое пользуясь утилитой justify-content:

Выравнивайте элементы используя утилиту align-items:

Можно использовать сплошное выравнивание используя утилиту align-self:

Для придания равной ширины для вложенных элементов используется класс .flex-fill:

Есть контроль над гибкими элементами через авто-марджины:

Можно изменять способ оборачивания гибких элементов в гибком контейнере с помощью классов .flex-wrap и .flex-wrap-reverse:

Float

Эти классы располагают элемент слева или справа, или выключают прикрепление к какому-либо краю, используя свойство float в CSS.

Взаимодействие

Служебные классы, которые изменяют способ взаимодействия с содержимым сайта.

Класс .user-select-all не поддерживается ни одним браузером.

Переполнение

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

Тени

С помощью утилиты box-shadow можно добавлять тень:

Размеры

С помощью утилит ширины и высоты можно создавать элементы требуемой ширины или высоты. Включают поддержку по 25%, 50%, 75% и 100% по умолчанию. Но, можно изменить эти значения так, как вам нужно.

Интервалы

Вы можете назначать значения margin или padding элементу с помощью удобных классов.

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl. Свойства (property), стороны (sides), контрольные точки (breakpoint) и размер (size) вы можете подробно изучить на официальном сайте Bootstrap.

Растянутая ссылка

Вы можете сделать любой элемент кликабельным растягивая вложенную ссылку с помощью класса .streched-link:

Текст

Выравнивание

Для выравнивания влево, вправо и по центру доступны классы, которые используют те же контрольные точки ширины окна просмотра, что и система сетки.

Перенос текста и переполнение

Обтекание текста с помощью класса . text-wrap:

Запрещайте перенос текста с помощью класса .text-nowrap:

Чтобы обрезать длинное содержимое многоточием вы можете добавить класс .text-truncate. Требуется display: inline-block или display: block.

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Толщина текста и курсив

Изменяйте толщину и добавляйте курсив текста.

Моноширный текст

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Текстовое оформление

Удалите текстовое оформление с помощью класса .text-decoration-none.

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

Вы можете изменять параметры вертикального выравнивания элементов:

Видимость

Вы можете установить видимость элементов с помощью утилит видимости. Эти служебные классы не изменяют значение display и не влияют на макет — элементы .invisible по-прежнему занимают место на странице.

Заключение

В данной статье мы попытались в сжатом виде рассказать вам об основных возможностях работы с фреймворком Bootstrap. Подробно ознакомится с документацией по Bootstrap вы можете на официальном сайте фреймворка:

Для изучения инструкций требуются знания HTML, CSS и понимание кода JavaScript. Однако, для полноценной реализации адаптивной и валидной верстки, а также программирования клиентской части сайта на JavaScript уже требуется квалификация среднего или высокого уровня вместе с опытом.

Если у вас недостаточно времени для изучения материала и экспериментов, мы можем предложить вам оперативное создание адаптивного сайта с валидным кодом и возможностью самостоятельного наполнения. А после запуска в эксплуатацию вашего сайта, мы обеспечим вам позиции на первой странице поисковых систем Яндекс и Google в рамках работ по SEO-оптимизации и продвижению и осуществим поддержку во время эксплуатации.

text-align | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1	`text-align: center \| justify \| left \| right \| inherit`
CSS3	`text-align: center \| justify \| left \| right \| start \| end`

Значения

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
Во всех других случаях выравнивание по центру применяется редко по той причине,
что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому
и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.
left: Выравнивание текста по левому краю. В этом случае строки текста выравнивается
по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает
в роли антагониста предыдущему типу. А именно, строки текста равняются по
правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
а именно с него начинается чтение новых строк, такой текст читать труднее,
чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
краю применяется обычно для коротких заголовков объемом не более трех строк.
Мы не рассматриваем специфичные сайты, где текст приходится читать справа
налево, там возможно подобный способ выравнивания и пригодится.
auto: Не изменяет положение элемента.
inherit: Наследует значение родителя.
start: Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end: Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Bootstrap 4 блок по центру

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока. Остальные распределятся поровну.

Используя классы col—auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.

Можно оставить стандартное поведение, не сжимая общую ширину.

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

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

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

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

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

.flex-first – отображается первым
.flex-last – отображается последним
.flex-unordered – отображается между первым и последним

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

Задача: вывести любой элемент по центру страницы с определенной шириной данного элемента (Bootstrap 4).

Вопрос: правильная-ли верстка относительно поставленной задачи? Если нет, то буду благодарен за наглядные примеры!

Каким образом можно центрировать текст по высоте внутри col? Например, несколько col фиксированной высоты (300px), внутри которых некий текст, который нужно отцентрировать по высоте col. Спасибо!

2 ответа 2

Если не затрагивать CSS, а использовать только Bootstrap, то нужно просто добавить класс my-auto :

my-auto центрирует по вертикали,
mx-auto центрирует по горизонтали.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками bootstrap или задайте свой вопрос.

Равномерное выравнивание блоков по ширине — CSS-LIVE

В задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
Чтобы было более понятно, о чём идёт речь, приведу пару изображений.

На рисунках видно, что при разном разрешении экрана пункты всё равно продолжают выравниваться по ширине, примыкая к боковым стенкам и делая отступы между собой — равнозначными.
В этой статье я хочу подробнее разобрать разные варианты решения данной задачи, а также рассмотреть все плохие и хорошие стороны этих методов.

Как это работает?

Перед тем, как рассматривать каждое решение в отдельности, давайте немного углубимся в тонкости механизма и поразмыслим, как он работает.
По сути мы должны получить то, что делает text-align: justify с текстом. Так как поведение наших блоков уж очень напоминает результат выравнивания слов в строке с помощью именно этого свойства. Немного углубившись в процесс работы text-align: justify, мы можем наблюдать следующий алгоритм.

Этап первый
Сначала в строке текста ищутся минимальные, неразрывные «кирпичики». Это могут быть отдельные слова в тексте, картинки, инлайн-блоки, инлайн-таблицы и т.д. В общем всё то, что в случае необходимости перенесется на новую строку как единое целое.

Цифрой 1 на картинке отмечены обычные инлайн-боксы, т.е. попросту текст или инлайн элементы, такие, например, как < span> или <em>.
Под цифрой 2 у нас находится элемент строчно-блочного уровня, т.е inline-block. Как можно заменить, алгоритм отступов внутри него рассчитывается заново. Причина в том, что внутри себя inline-block генерирует свой собственный контекст форматирования. Что нельзя сказать об обычном inline элементе, внутри которого межсловное расстояние распределялось бы, по общему, внешнему алгоритму.
Цифрой 3 отмечена обычная картинка. Так же, как и остальные, она является строчным, целым элементом.
Для нашей строки все эти вещи представляют из себя отдельные сущности, неразделимые слова, единые целые. А расстояния между ними как раз и регулируется нашим механизмом, под названием text-align: justify
*Последняя же строка не попадает в поле зрения justify, так как он работает только для целиком заполненных строк, а в последней строке пробелы всегда остаются своего обычного размера.

Этап второй
Вторым этапом алгоритм высчитывает ширины всех наших «кирпичей» в строке, складывает их, а полученный результат отнимает от общей ширины самой строки.

Отсюда можно сделать вывод, что сейчас мы имеем общую сумму всех пробельных зон в строке, которая равна 116px.

Этап третий — завершающий
Третьим и последним этапом алгоритма будет деление полученной цифры (в данном случае 116) на количество пробелов в строке (в нашей строке их 7). Из полученного результата (16.571) вычитается ширина одного пробела и уже это значение добавляется к каждому из них. Что в итоге даёт равномерное распределение отступов во всей строке.

Итог
Как мы можем видеть, алгоритм работы text-align: justify не так уж и сложен на самом деле, всё вроде бы понятно и логично. Я уверен, что каждый из нас, решая подобную задачу, высчитывал бы результат, по точно такому же сценарию. Сложность заключается только в том, чтобы написать хорошее, красивое, а главное качественное решение, затратив при этом минимум материала. Ведь существует много подводных камней, в виде последней (не попадающей под алгоритм) строки, которую нужно прятать, или каким либо образом выравнивать точно так же, как и все остальные. Ну и естественно нельзя забывать об интерпретации кода, таких браузеров, как Opera, IE6-7, которые любят преподносить неожиданные сюрпризы.

Наша задача

Наша задача состоит в том, чтобы построить решение на базе этого алгоритма. Применить, симулировать, заменить, сделать всё что угодно, главное в итоге получить то, что мы хотим. А именно — равномерно выровненные элементы в строке, боковые из которых прижаты к своим границам. Ну и конечно же расстояния (пробелы) между элементами должны быть абсолютно одинаковыми при любой ширине контейнера.

Вариант 1

Самое первое, что пришло мне на ум, это взять список из пяти пунктов, сделать 4 из них обтекаемыми, а у последнего отменить float и растянуть на всю оставшуюся ширину. Чтобы было понятнее, о чём идёт речь, привожу код.
Структура будет таковой

<ul>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
</ul>

А CSS таким

ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li {

	}
	ul li.left {
		width: 20%;
		float: left;
	}
	ul li.right {
		width: 20%;
		float: right;
		text-align: right;
	}
	ul li.center {
		text-align: center;
	}
	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Что мы собственно сделали? А сделали мы следующее. Два левых и два правых пункта мы раскидали по разным сторонам с помощью float : left и float : right соответственно, при этом назначив им по 20% ширины каждому, что в сумме дало 80% от всей ширины контейнера. Последний пункт, я решил не делать обтекаемым, так как его содержимое само по себе занимает всё оставшиеся пространство после float-блоков.
Соответственно для такого решения пришлось пожертвовать разметкой, а точнее дополнительными классами + внутренними контейнерами для контента. Как вы могли заметить, каждый из этих контейнеров я сделал строчно-блочным, повесив на них display : inline-block, благодаря чему мой контент смог выравниваться в любую сторону с помощью text-align у родителя. Эти «жертвы» с большой натяжкой можно было бы отнести к хорошему решению, если бы не некоторые, весомые «но».
Во-первых, как видно из скриншотов, равномерные отступы имеют только боковые пункты, а между средним и остальными есть явная разница. И чем больше ширина контейнера, тем заметнее это становится.
Во-вторых, ради эксперимента, я назначил второму пункту ширину, равную 200px.

И второй элемент сразу же оказался под третьим. Конечно же можно было бы поставить минимальную ширину контейнеру и такого бы не произошло, но разве можно считать это действие отговоркой или решением? Конечно же нет! Я хочу, чтобы наши пункты могли иметь любую ширину и при этом чтобы наш алгоритм идеально работал.
Ну и в-третьих, все эти дополнительные обёртки, классы, рассчитывание кол-ва элементов, их ширины, а так же и ширины контейнера ставят абсолютную точку на этот варианте, заставляя нас идти дальше, в поисках настоящего решения.
Выкладываю этот вариант на всеобщий суд и перехожу к следующему способу.
Вариант с разносторонним выравниванием

Вариант 2

Второй вариант напоминает первый, но только отчасти. Дело в том, что в нём мы выравниваем по левому краю только один, левый блок, а остальные находятся уже в своём, собственном контейнере. Но перейдём от слов к делу.

<ul>
	<li>
		<div>1</div>
	</li>
	<li>
		<ul>
			<li>
				<div>2</div>
			</li>
			<li>
				<div>3</div>
			</li>
			<li>
				<div>4</div>
			</li>
			<li>
				<div>5</div>
			</li>
		</ul>
	</li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li.one {
		float: left;
	}
	ul li.two {
		overflow : hidden;
		float : none;
	}
	ul li.two li {
		width: 25%;
		text-align: right;
		float: left;

		/* Лекарство для IE6-7*/
		//width: 24.9%;
	}

	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

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

Левая колонка прижата к левому краю и содержит в себе самый первый, одиночный блок. Это нужно для того, чтобы правая часть прижималась вплотную с правой стороны и растягивалась на всё оставшееся место. Растяжка правой части происходит благодаря overflow : hidden, который создаёт свой контекст форматирования, т.е. по сути свой собственный, независимый контейнер. Для всех дочерних элементов этого контейнера его ширина составляет 100% и поэтому блоки внутри него мы растягиваем в соответствии с этим правилом. Четыре блока имеют ширину 25%, что в сумме даёт 100. На изображении можно увидеть, как расположены эти блоки. Видно, что строчно-блочные элементы с контентом внутри них выровнены по правому краю с помощью text-align : right, благодаря чему самый правый блок прижат к своей боковой стенке, так же как и левый.

Благодаря таким «жертвам» с двумя колонками, мы получили отличный результат, и как видно из первых рисунков, при разных разрешениях, расстояние отступов между блоками остаётся абсолютно одинаковым. Это происходит за счёт равнозначных блоков в правой части. Ширина каждого из них составляет 25%, а элемента внутри них — 100px. Что и даёт равные отступы слева от каждого «кирпичика» в отдельности.
На данный момент можно смело заявить, что при фиксированной ширине блоков у нас получилось именно то, что мы хотели.

Но всё же интересно узнать, что будет, если мы поменяем ширину сначала у первого, а потом и у любого блока из правой части. Давайте для начала поставим левому… ну допустим 150px.

ul li.one .content { width: 150px;}

Всё здорово! Пока работает всё та же идея с правым, самостоятельным контейнером. А теперь перенесём нашу ширину на первый блок в правой части.

Эх, а вот этот эксперимент потерпел неудачу. Правый отступ у самого левого блока оказался меньше, чем все остальные. Всё легко объясняется тем, что контент первого элемента в правой части, стал больше на 50px, а так как он выровнен по правой стороне, то ширина визуально прибавилась к его левой части и соответственно стала отличаться от ширины соседних блоков. Ну и естественно поменялся отступ, который стал меньше ровно на 50px.

Из всего этого можно сделать вывод, что данный метод явно лучше, чем его предшественник и то, что он имеет право на жизнь. Единственный его недостаток связан с тем, что мы не может задать разную ширину блокам, и должны придерживаться одинаковой. Так что, если у вас есть список, в котором все пункты имеют равную ширину, то вы вполне можете применять этот подход. Конечно же, нужно понимать, что без двухколоночной структуры тут не обойтись + нужна обязательная минимальная ширина у контейнера (min-width), иначе при маленькой ширине экрана блоки будут наезжать друг на друга.
* Кстати, у себя в примере, в правом контейнере я использовал четыре блока по 25%, и их общая сумма составила 100%. Поэтому нужно помнить, что если блоков будет, ну скажем 6, то ширина каждого из них, будет равна 16.666, что говорит о дробных процентах, которые, например, не поддерживаются в браузере Opera.
Соответственно результат в этом случае будет немного не тем, чем вам хотелось бы.

Вариант с двумя колонками

Вариант 3 — text-align: justify

Стоит отметить, что до этого момента, ни в одном примере, мы ни разу не воспользовались text-align: justify, даже не смотря на то, что именно на основе его алгоритма и строятся все наши решения. Я предлагаю нарушить эту традицию и, наконец, пустить уже в дело этого зверя.

В первой части статьи мы выяснили, что text-align: justify влияет на все строки, кроме последней, а значит нужно построить наш список с учётом этого поведения, добавив в конец меню дополнительный, вспомогательный элемент.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}

Из кода ясно, что мы создали список с пятью основными и одним элементом — помощником. text-align: justify на главном элементе-родителе (ul), заставляет своих потомков подчиняться своему алгоритму. Ведь, как известно, это свойство работает с текстом, а так как наши строчно-блочные (display: inline-block) пункты, по сути и являются неразрывными словами в строке, то это поведение вполне закономерно. Кстати, стоит учесть, что text-align: justify наследуемое свойство, поэтому text-align: left на ближайших потомках — необходимая мера. Этим самым мы как бы возвращаем выравнивание содержимого наших блоков в прежнее состояние.
В первой части статьи я упоминал, что наш алгоритм не распространяется на последнюю строку, а работает со всеми строками кроме неё. Поэтому я добавил в конец ещё один элемент, пустышку, и растянул его на 100% по ширине, тем самым заставив его растянуться на самую последнюю строчку в списке. С помощью нехитрых приёмов (height: 0, visibility: hidden) я, можно сказать, почти что спрятал его. Почему я сказал «Почти что»? Об этом чуть позже, для начала давайте взглянем на то, что у нас вышло.

Первое, что бросается в глаза, это то, что при разной ширине наш алгоритм работает так, как и должен. При пунктах с одинаковой шириной расстояние между ними сохраняется одинаковым, что не может не радовать. Но всё таки интересно узнать, будет ли всё так же хорошо при разной ширине блоков. Назначим паре пунктам классы и проверим это.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>

Добавим для них свои правила.

.first { width: 150px;}
.third { width: 200px;}

Проверяем.

Я специально увеличил ширину экрана, чтобы при маленькой ширине блоки не перескакивали на другую строку, как обычные слова в тексте. Но, если посмотреть на результаты алгоритма, то он работает! Пробелы между элементами остаются равнозначными, даже не смотря на то, что у двоих из них, мы увеличили ширину.
Т.е. можно с лёгкостью заявлять, что этот метод, с дополнительным элементом в конце — даёт отличный результат и, если ограничить экран по ширине, то его применение на практике нас не разочарует.
Так, ну а теперь, пожалуй, настало время подлить ложку дёгтя.
Во-первых, как вы могли заметить, во всех примерах я перечислял все браузеры, кроме IE6-7.
Во-вторых, опять же, как вы, наверное могли видеть на рисунках, внизу нашей строки, где дополнительный элемент, есть большие, непонятные отступы.
Давайте разбираться по порядку.

Первая проблема — это проблема IE6-7. Не приводя скриншоты, скажу сразу, что наш метод там не работает. Пункты в этих браузерах прижаты друг к другу вплотную и не растягиваются в строке. Дело в том, что парсер IE6-7 полностью игнорирует закрывающие теги у элементов <li>. А нет тегов — значит нет пробелов между ними, и, следовательно text-align: justify пропускает нашу строку, состоящую по сути из одних «строчно-блочных» слов, прижатых друг к другу.

За решением данной проблемы мы отправляемся на самую высокую гору… на MSDN. Мда… найти что либо на этом сайте, представляет большую трудность. Но, всё же повозившись, некоторое время, решение было найдено! text-justify: newspaper — свойство для увеличения или уменьшения интервалов между буквами и между словами. MSDN заявляет, что эта вещь «Самая навороченная форма выравнивания для латинского алфавита», а вот в этой статье ещё есть и дополнение, что для арабских текстов это свойство вытягивает и сами буквы.
Отлично, нам как раз нужно что-нибудь наподобие. Давайте-ка проверим их слова на деле.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}
	.first { width: 150px;}
	.third { width: 200px;}

А вот и результат.

Победа! IE6-7 были побеждены их же оружием. Здорово. Теперь во всех браузерах, начиная с IE6, наш способ работает идеально. Выходит, что MSDN не подвели и их слова подтвердились на деле. Так что text-align: justify выручил нас, поэтому берём его на заметку и переходим к решению второй проблемы.

Вторая проблема связана с непонятным отступом между низом списка и нашей строкой с элементами. В чём же дело? А дело в том, что всё вполне закономерно и этими странными отступами являются ни кто иные, как межстрочный интервал (line-height) и размер шрифта (font-size), которые априори присутствуют у строк и букв в тексте. Наши элементы — блочные только внутри, а строчные снаружи, поэтому они и попадают под эти правила.
Как быть? А легко! Мы можем повесить на контейнер обнуление этих стилей, а уже у потомков восстановить их в прежнее состояние. Пробуем.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* Востанавливаем у потомков, кроме последнего*/
		line-height: normal;
		font-size: 14px;

		/* Без него в Opera будет отступ под элементами */
		vertical-align: top;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0px;
		visibility: hidden;
		overflow: hidden;
	}
	.first { width: 150px;}
	.third { width: 200px;}

Результат.

До обнуления

После обнуления

Отлично! Всё получилось. Обнуление стилей у главного контейнера помогло нам. Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата. Но, а целом, наш метод работает идеально, так что можно подводить итоги и идти дальше, ведь нам же мало одного решения, нам же нужно больше и лучше, не правда ли?

Подводя промежуточные итоги, скажу, что данный подход пока что лидер среди присутствующих до сей поры решений, и что, я лично, не вижу в нём ни одного изъяна, правда, кроме… Кроме дополнительного элемента в конце строки, плюс, как мне кажется, неактуальные проблемы с % и em. Но, эти натянутые минусы, никак не могут быть причиной отказа от представленного варианта. Так что смотрим результат и идём дальше.
Вариант дополнительным элементом

Вариант 4 — Избавление от дополнительного элемента

В предыдущем варианте для нашей цели мы использовали дополнительный элемент, ставя его в конец списка. С одной стороны, конечно же, этот маневр принес свои плоды, но с другой… но с другой стороны создал некие неудобства. Например, при динамическом добавлении пунктов, вспомогательный блок будет только мешать, да и потом этот «хвост» портит нашу структуру, засоряя её. В этом варианте, я предлагаю избавиться от него, не испортив при этом решение.
В CSS2.1 уже давно есть такие вещи, как псевдоэлементы. Это такие абстрактные сущности, которые могут быть сгенерированы каким нибудь элементом и вставлены в его начало или конец. Почему бы не заменить таким псевдоэлементом наш лишний вспомогательный блок? Давайте попробуем…

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;
}
	ul:after {
			width: 100%;
			height: 0;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

В данной ситуации мы воспользовались псевдоэлементом :after, который сгенерировали в конце нашего списка. Выставив ему те же значения, что и бывшему, вспомогательному блоку, мы, по сути сделали тоже самое, но не залезая в разметку. Т.е. создали такой же, пустой, но полезный элемент. И вот результаты.

Здорово! Трюк с псевдоэлементом сработал. Теперь наша разметка чистая, аккуратная и без лишнего «мусора». Нам удалось избавиться от дополнительного элемента, полностью заменив его сгенерированным.
Но, как обычно, не обошлось без ~~IE6-7~~ приключений. К сожалению, в браузерах IE6-7 нет поддержки :after и :before. А если нет поддержки, следовательно и нет никаких вспомогательных блоков, а значит и растягивать попросту нечего. Поэтому картина в этих браузерах такова.

Как видно из скриншота, IE6-7 полностью игнорирует пробелы между блоков, прижимая их вплотную друг к другу. Даже не смотря на то, что мы уже задействовали тяжёлую артиллерию в виде text-justify: newspaper. Почему же это происходит? Давайте выясним.
Оказывается всё дело в том, что text-justify: newspaper лишь даёт возможность растягивать наши буквы (inline-block), но не команду. Проще говоря, он рассказывает строке, как бы он хотел, чтобы она была растянута, а text-align: justify является растягивающей силой. Т.е. text-align: justify отвечает за растяжение строки, а text-justify: newspaper лишь уточняет, как именно это растяжение будет происходить.
Да, но тогда возникает вопрос: «Если есть и возможность и сила, которая может её исполнить, то почему же тогда ничего не происходит?». Ответ кроется в самом свойстве text-align: justify. Если вы помните, в обсуждении его алгоритма я упомянул о том, что он не распространяется на последнюю строку в тексте. А так как мы убрали вспомогательный элемент в конце списка, то соответственно наша строка (пускай даже она одна) с блоками — стала уже последней, и следовательно алгоритм отказался с ней работать.

Как же быть? Есть ли выход?
К счастью мир не без добрых людей, и один такой добрый человек направил меня на верный путь. Оказывается решение было у меня под носом. text-align-last — свойство, которое включает алгоритм text-align: justify в самой последней строке текста, если к ней применён этот самый text-align: justify. Проще говоря, когда мы применяем к тексту обычный text-align: justify, то, видя это, text-align-last указывает первому на то, что он поступает плохо и что ему придётся теперь работать и в последней строчке тоже.
Самое интересное, что это свойство считается ориентированным именно на Internet Explorer, в котором он нам как раз и нужен). В общем пора переходить к делу.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;

	/* Включаем в работу последнюю строку*/
	text-align-last: justify;
}
	ul:after {
			width: 100%;
			height: 0px;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

Да! У нас получилось. text-align-last: justify сделал то, что от него требовалось, и сделал это на 5 баллов. Алгоритм включился в работу, в нашей последней и единственной строке. Так что празднуем победу и подводим итоги этого способа.

Ну что ж, я доволен. Доволен тем, что нам удалось найти действительно достойное решение. Причём не просто найти, а разобраться во всём и довести его до абсолютной кроссбраузерности, затратив минимум кода и не засоряя разметки. На лицо одни плюсы, а что же с минусами? Как по мне, так их попросту — нет. По сравнению с предыдущим вариантом, в этом мы только улучшили результаты. Разве что…

Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата.

Но, опять же, эти «минусы» с большой натяжкой можно назвать таковыми. Их неактуальность говорить о том, что про них можно практически забыть, если это не принципиально.
Так что в целом решение отличное, надёжное и действительно качественное.
Вариант с псевдо-элементом

Резюме

В этой статье мы рассматривали не только методы, которые могут помочь нам в равномерном выравнивании блоков по ширине, но и так же очень подробно разобрали механизмы работы всех свойств и деталей, участвующих в процессе. Всё это важно для понимания вещей, с которыми мы имеем дело. Поэтому я настоятельно рекомендую перечитать статью, и не один раз.
Я безумно рад, что нам удалось добиться своей цели и найти достойное и качественное решение.

Все варианты воедино

1. Вариант с разносторонним выравниванием (К сожалению неработающее решение. Надеюсь, что в комментариях кто нибудь натолкнёт на верный путь)
2. Вариант с двумя колонками (Работающее решение, но только с фиксированными по ширине блоками)
3. Вариант дополнительным элементом (Работающее решение)
4. Вариант с псевдо-элементом (Работающее решение)

Обновление от 08.10.2014

Вариант 5 — используем новые технологии

5. Вариант с использованием флексбоксов и постепенным улучшением

См. отдельную статью

P.S. Это тоже может быть интересно:

css — Bootstrap 4 — Выровнять по горизонтали и вертикали

css — Bootstrap 4 — Выровнять по горизонтали и вертикали — 2 ответа

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил
3 года, 11 месяцев назад

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

На этот вопрос уже есть ответы здесь :

Закрыт 3 года назад.

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

Может кто-нибудь подскажет лучший подход для этого?

  

  

    
      

       Доступ к программе 
      
        
        <форма>

Спасибо

Создан 08 окт.

GCoeGCoe

1111 золотой знак1010 серебряных знаков2727 бронзовых знаков

Bootstrap4 теперь использует CSS Flexbox, так что вы можете использовать то же самое.Flexbox имеет встроенную поддержку вертикального и горизонтального выравнивания.

Как правило, контейнер flexbox может иметь flex-direction как строку (значение по умолчанию) или столбец . В первом случае свойство align-items может использоваться для вертикального выравнивания своих дочерних элементов, а свойство justify-content — для горизонтального выравнивания. В то время как в последнем случае align-items используется для горизонтального выравнивания, а justify-content — для вертикального выравнивания.

Подробнее о Flexbox можно узнать здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Создан 09 окт.

Попробуйте

  
      

       Доступ к программе 
      
        
        <форма>

Я удалил col-md-4 и заменил его на d-flex justify-content-center align-content-center .Это бета-версия утилиты bootstrap 4 для flexbox. Хотя вы также можете сделать встроенный стиль

Подробнее
http://getbootstrap.com/docs/4.0/utilities/flex/

Создан 09 окт.

brijmcqbrijmcq

3,05322 золотых знака1313 серебряных знаков3434 бронзовых знака

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Flex · Bootstrap

Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора гибких утилит flexbox.Для более сложных реализаций может потребоваться собственный CSS.

Включить гибкое поведение

Примените утилиты display , чтобы создать контейнер flexbox и преобразовать прямых дочерних элементов в гибкие элементы. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.

   Я контейнер flexbox!

Я встроенный контейнер Flexbox!

   Я встроенный контейнер flexbox!

Адаптивные варианты также существуют для .d-flex и . d-inline-flex .

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

Направление

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

Используйте .flex-row, , чтобы задать горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3 


   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3

Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3 


   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3

Адаптивные варианты также существуют для flex-direction .

.flex-row
.flex-row-reverse
. Гибкая колонка
.flex-колонка-реверс
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-колонка
.flex-sm-колонка-реверс
.flex-md-row
.flex-md-row-reverse
.Flex-MD-столбец
.flex-md-колонка-реверс
.flex-lg-row
.flex-lg-row-обратный
.flex-LG-колонка
.flex-lg-колонка-реверс
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-колонка
.flex-xl-column-reverse

Обоснование содержания

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: column ).Выберите начало (браузер по умолчанию), конец , центр , между или около .

Гибкий элемент

  ... 
 ... 
 ... 
 ... 
 ...

Варианты ответа также существуют для justify-content .

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-между
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md-около
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-между
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-между
.justify-content-xl-around

Выровнять позиции

Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите начало , конец , центр , базовое значение или растяжение (браузер по умолчанию).

Гибкий элемент

  ... 
 ... 
 ... 
 ... 
 ...

Адаптивные варианты также существуют для align-items .

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.выровнять элементы-sm-конец
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.выровнять элементы-LG-конец
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

Самовыравнивание

Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ).Выберите один из тех же вариантов, что и для align-items : начало , конец , центр , базовый план или растяжение (браузер по умолчанию).

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

   Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент

Адаптивные варианты также существуют для align-self .

.align-самозапуск
. Выравнивание-саморез
. Выравнивание-самоцентрирование
.align-self-baseline
. Выравнивание-саморастягивание
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-baseline
.align-self-sm-stretch
.выровняйте-само-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-конец
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.выровняйте-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

Автоматические поля

Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), смещение двух элементов вправо (.mr-auto ) и сдвинув два элемента влево ( .ml-auto ).

К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для гибких элементов, родительский элемент которых имеет нестандартное значение justify-content . См. Этот ответ StackOverflow для получения дополнительных сведений.

Гибкий элемент

  
   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex

С элементами выравнивания

Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Гибкий элемент

  
   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex

Обертка

Измените способ переноса гибких элементов в гибкий контейнер.Выберите вариант без упаковки (по умолчанию в браузере) с .flex-nowrap , обертывание с .flex-wrap или обратное обертывание с .flex-wrap-reverse .

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Адаптивные варианты также существуют для flex-wrap .

.flex-nowrap
. Гибкая пленка
.flex-wrap-реверс
.flex-sm-nowrap
.flex-sm-пленка
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-пленка
.flex-md-wrap-обратный
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-обратный
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

Заказать

Измените порядок определенных гибких элементов visual с помощью нескольких утилит порядка и . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку порядок принимает любое целочисленное значение (например, 5 ), добавьте собственный CSS для любых необходимых дополнительных значений.

Первый элемент гибкости

Второй гибкий элемент

Третий гибкий элемент

  
   Первый гибкий элемент 
   Второй гибкий элемент 
   Третий гибкий элемент

Адаптивные варианты также существуют для заказа .

. Заказ-0
. Заказ-1
. Заказ-2
. Заказ-3
.заказ-4
. Заказ-5
. Заказ-6
. Заказ-7
. Заказ-8
. Заказ-9
. Заказ-10
. Заказ-11
. Заказ-12
. Заказ-см-0
. Заказ-см-1
. Заказ-см-2
. Заказ-см-3
.заказ-см-4
. Заказ-см-5
. Заказ-см-6
. Заказ-sm-7
. Заказ-см-8
. Заказ-см-9
. Заказ-см-10
. Заказ-см-11
. Заказ-см-12
.order-md-0
.order-md-1
.order-md-2
.заказ-мд-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.заказ-LG-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.заказ-XL-1
.order-XL-2
.order-xl-3
.order-XL-4
.order-XL-5
.order-XL-6
.order-xl-7
.order-xl-8
.order-XL-9
.order-XL-10
.order-XL-11
.order-xl-12

Выровнять содержание

Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси.Выберите начало (по умолчанию браузер), конец , центр , между , вокруг или растяжение . Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество гибких элементов.

Внимание! Это свойство не влияет на отдельные строки гибких элементов.

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Адаптивные варианты также существуют для align-content .

.align-content-start
.align-content-end
.align-контент-центр
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.выровнять контент-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-about
.выровнять контент-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch

Как центрировать div по горизонтали в Bootstrap 4 (2021)

Обновлено 5 августа 2021 года
read

В макетах веб-дизайна очень часто центрируют столбец в строке или контейнере по горизонтали.Но как это сделать с помощью классов Bootstrap? Ниже приведены несколько различных способов достижения этого эффекта.

Вариант 1 — Смещение начальной загрузки

Классы смещения начальной загрузки можно использовать для горизонтального смещения столбцов влево или вправо. Это полезно, когда вы хотите, чтобы один столбец имел максимальную ширину, но располагал его по центру в строке.

Смотри! Я центрирован по горизонтали

Смотрите! Я центрирован по горизонтали

Вариант 2 — Margin Auto

В этом примере устанавливается максимальная ширина для средних контрольных точек и ширина до 8 столбцов.Затем я добавил служебный класс .mx-auto , который устанавливает левое и правое поле для автоматического центрирования по горизонтали внутри контейнера .row .

Я тоже!

Вариант 3 — Утилита ширины Bootstrap

В этом примере я использую служебный класс ширины Bootstrap.w-50, чтобы все время делать div шириной 50%. Затем я добавил служебный класс .mx-auto , который устанавливает левое и правое поле для автоматического центрирования по горизонтали внутри контейнера .row .

Я Трое!

Me Three!

Вариант 4 — Используйте классы Flexbox

Если у вас есть несколько элементов, которые вы хотите центрировать, вы можете попробовать использовать комбинацию классов Flexbox.Вот шпаргалка по flexbox, показывающая, как они работают.

пункт 1

пункт 2

пункт 3

элемент 1

элемент 2

item 3

Заключение

Как и в большинстве случаев в веб-разработке, существует несколько способов достижения одного и того же результата.Выбор правильного подхода для вашего проекта зависит от того, что, по вашему мнению, легче всего запомнить и поддерживать. Лично мне нравится вариант 1, потому что он позволяет центрировать столбец по горизонтали на больших экранах, а затем перемещаться по всей ширине на мобильных устройствах.

Посмотреть демонстрацию Codepen

Bootstrap 4 по центру (горизонтальное выравнивание)

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро /
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Bootstrap 4 Центральное вертикальное и горизонтальное выравнивание

Решение:

Обновление 2019 — Bootstrap 4.3.1

Для дополнительных CSS нет необходимости . То, что уже включено в Bootstrap, будет работать.Убедитесь, что контейнер (контейнеры) формы составляет , полную высоту . Bootstrap 4 теперь имеет класс h-100 для высоты 100% …

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

  
  
    <форма>
      
         Пример метки 
        
      
      
         Другой ярлык

https: // codeply.com / go / raCutAGHre

высота контейнера с предметом (ами) по центру должна быть 100%
(или любая другая желаемая высота относительно центрируемого элемента)

Примечание. При использовании высоты : 100% ( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах vh блоки высота: 100vh; можно использовать вместо % , чтобы получить желаемую высоту.

Таким образом, вы можете установить html, body {height: 100%} или использовать новый класс min-vh-100 для контейнера вместо h-100 .

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

текстовый центр по центру Отображение: встроенные элементы и содержимое столбца
mx-auto для центрирования внутренних гибких элементов
offset- * или mx-auto можно использовать для центральных колонн ( .col- )
justify-content-center – центральные столбцы ( col- * ) внутри строки

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4, полноэкранный центрированный вид
Bootstrap 4, центральная группа ввода
Bootstrap 4, горизонтальный + вертикальный центральный полноэкранный режим

Эта работа для меня:

  <раздел>
  <заголовок>
    
      
         пункт 1 
         пункт 2

flexbox может вам помочь.информация здесь

css — Bootstrap 4 Center Vertical e Horizontal Alignment

Aggiornamento 2019 — Bootstrap 4.3.1

C’è не требуется для дополнительных CSS . Вы можете включить его в функционал Bootstrap. Assicurati Che i Contenitori del modulo siano Altezza Complete .Bootstrap 4 или один класс h-100 для 100% altezza …

Centro verticale:

  
  
    <форма>
      
         Пример метки 
        
      
      
         Другой ярлык

https: // www.codeply.com/go/raCutAGHre

Альтецца-дель-содержание с большими объектами на центральном уровне 100% (без цензуры)

высота: 100 сша. % ( процентной высоты ) su qualsiasi elemento, l’elemento Предполагается, что l’altezza del suo contenitore . Nei browser moderni vh unità высота: 100vh; после использования на посту % для получения желаемого.

Pertanto, puoi impstare html, body {height: 100%} o utilizzare la nuova classe min-vh-100 sul contenitore anziché h-100 .

Centro orizzontale:

text-center процентов по центру дисплей: встроенный элементы и содержимое колонны
mx-auto в центре всех внутренних элементов
смещение

или mx-auto Возможно использование для центральных колонн (.col- )

justify-content-center a colne centrali ( col- * ) all’interno row

Центр вертикального выравнивания в Bootstrap 4
Bootstrap 4 формирует schermo intero centrato
Gruppo di input centrale Bootstrap 4
Bootstrap 4 orizzontale + centro verticale a schermo intero

Как центрировать столбец в Bootstrap

Тема: Bootstrap / SassPrev | След.

Ответ: Используйте

mx-auto Class

Если вы используете версию Bootstrap 4 , вы можете центрировать столбец сетки по горизонтали, применив класс .mx-auto на нем. Давайте попробуем следующий пример, чтобы увидеть, как это работает:

В качестве альтернативы вы также можете применить класс .justify-content-center к элементу .row , чтобы центрировать столбец по горизонтали. Давайте посмотрим на следующий пример:

Но в Bootstrap 3 все немного иначе.Если номер столбца сетки четный (например, 2, 4, 6, 8, 10, 12), вы можете использовать класс .col- {xs | sm | md | lg} -offset- * для выравнивания столбца в центр, вот так:

Однако, если номер столбца сетки нечетный (например, 1, 3, 5, 7, 9, 11), вы должны использовать некоторый собственный CSS.Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:

  / * код CSS * /
.col-centered {
    float: нет;
    маржа: 0 авто;
}

Связанные вопросы и ответы

Вот еще несколько часто задаваемых вопросов по этой теме:

Bootstrap 4 выравнивание по горизонтали: Bootstrap 4 центровое вертикальное и горизонтальное выравнивание

Bootstrap 4 по центру вертикального и горизонтального выравнивания

twitter-bootstrap-3 — Bootstrap col-sm-4 выравнивание текста по вертикали

2 ответа

html — Центр выравнивания по вертикали в Bootstrap 4

Обзор инструментов Bootstrap для создания адаптивного сайта

CMS и фреймворки

Интерфейсный фреймворк Bootstrap

Что входит в Bootstrap

Разметка

Содержание

Типографика

Изображения

Таблицы

Компоненты

Уведомления

Значки

Навигационная цепочка

Кнопки

Карточки

Карусель

Сворачивание

Выпадающие элементы

Формы

Jumbotron

Медиа-объекты

Модальные окна

Навигация

Навигационная панель

Прогрессбар

Отслеживание прокрутки

Спиннеры

Всплывающие сообщения

Утилиты

Границы

Отображение элементов

Встраивание

Flex

Float

Взаимодействие

Переполнение

Тени

Размеры

Интервалы

Растянутая ссылка

Текст

Выравнивание

Перенос текста и переполнение

Трансформация текста

Толщина текста и курсив

Моноширный текст

Текстовое оформление

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

Видимость

Заключение

text-align | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Bootstrap 4 блок по центру

Из стопки в ряд

Смешиваем все классы

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

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

Промежутки

Сортировка колонок

Смещение колонок

2 ответа 2

Всё ещё ищете ответ? Посмотрите другие вопросы с метками bootstrap или задайте свой вопрос.

Похожие

Равномерное выравнивание блоков по ширине — CSS-LIVE

Как это работает?

Наша задача

Вариант 1

Вариант 2

Вариант 3 — text-align: justify