Bootstrap center div: File not found · Bootstrap v5.1 — Программирование на Python и Objective-C в Mac OS

Содержание

Flex. Утилиты · Bootstrap. Версия v4.0.0

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

Задействуйте «гибкое» поведение

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

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

<div>Я - контейнер flexbox!</div>

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

<div>Я встроенный контейнер flexbox!</div>

Также существуют отзывчивые варианты .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

Направление

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

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

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

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

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

Для flex-direction также есть отзывчивые вариации.

.flex-row

.flex-row-reverse

.flex-column

.flex-column-reverse

.flex-sm-row

.flex-sm-row-reverse

.flex-sm-column

.flex-sm-column-reverse

.flex-md-row

.flex-md-row-reverse

.flex-md-column

.flex-md-column-reverse

.flex-lg-row

.flex-lg-row-reverse

.flex-lg-column

.flex-lg-column-reverse

.flex-xl-row

.flex-xl-row-reverse

.flex-xl-column

.flex-xl-column-reverse

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

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between или around.

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для justify-content.

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-sm-start

.justify-content-sm-end

.justify-content-sm-center

.justify-content-sm-between

.justify-content-sm-around

.justify-content-md-start

.justify-content-md-end

.justify-content-md-center

.justify-content-md-between

.justify-content-md-around

.justify-content-lg-start

.justify-content-lg-end

.justify-content-lg-center

.justify-content-lg-between

.justify-content-lg-around

.justify-content-xl-start

.justify-content-xl-end

.justify-content-xl-center

.justify-content-xl-between

.justify-content-xl-around

Выравнивание элементов

Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для align-items.

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

.align-items-sm-start

.align-items-sm-end

.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

.align-items-lg-end

.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

Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

Выровненный элемент flex

Flex элемент

Выровненный элемент flex

Flex элемент

Выровненный элемент flex

Flex элемент

Выровненный элемент flex

Flex элемент

Выровненный элемент flex

Flex элемент

<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>

Отзывчивые вариации для align-self.

.align-self-start

.align-self-end

.align-self-center

.align-self-baseline

.align-self-stretch

.align-self-sm-start

.align-self-sm-end

.align-self-sm-center

.align-self-sm-baseline

.align-self-sm-stretch

.align-self-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-end

.align-self-lg-center

.align-self-lg-baseline

.align-self-lg-stretch

.align-self-xl-start

.align-self-xl-end

.align-self-xl-center

.align-self-xl-baseline

.align-self-xl-stretch

Авто-марджины

Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto), 3. «прижимаем» два элемента к левому краю (.ml-auto).

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

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

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

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

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

Обертка

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

Flex элемент

<div>
  ...
</div>

Flex элемент

<div>
  ...
</div>

Flex элемент

<div>
  ...
</div>

Отзывчивые вариации есть также для flex-wrap.

.flex-nowrap

.flex-wrap

.flex-wrap-reverse

.flex-sm-nowrap

.flex-sm-wrap

.flex-sm-wrap-reverse

.flex-md-nowrap

.flex-md-wrap

.flex-md-wrap-reverse

.flex-lg-nowrap

.flex-lg-wrap

.flex-lg-wrap-reverse

.flex-xl-nowrap

.flex-xl-wrap

.flex-xl-wrap-reverse

Порядок

Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order принимает цифровое значение (например, 5), добавьте обычный CSS для создания необходимых дополнительных значений.

Первый flex элемент

Второй flex элемент

Третий flex элемент

<div>
  <div>Первый flex элемент</div>
  <div>Второй flex элемент</div>
  <div>Третий flex элемент</div>
</div>

Отзывчивые вариации есть также для order.

.order-0

.order-1

.order-2

.order-3

.order-4

.order-5

.order-6

.order-7

.order-8

.order-9

.order-10

.order-11

.order-12

.order-sm-0

.order-sm-1

.order-sm-2

.order-sm-3

.order-sm-4

.order-sm-5

.order-sm-6

.order-sm-7

.order-sm-8

.order-sm-9

.order-sm-10

.order-sm-11

.order-sm-12

.order-md-0

.order-md-1

.order-md-2

.order-md-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

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

.order-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 в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.

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

Flex элемент

<div>
  ...
</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Отзывчивые вариации есть также для align-content.

.align-content-start

.align-content-end

.align-content-center

.align-content-around

.align-content-stretch

.align-content-sm-start

.align-content-sm-end

.align-content-sm-center

.align-content-sm-around

.align-content-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-around

.align-content-lg-stretch

.align-content-xl-start

.align-content-xl-end

.align-content-xl-center

.align-content-xl-around

.align-content-xl-stretch

Bootstrap center div остается в длинном прямоугольнике

Я уже создал эту базовую веб-страницу, которая имеет заголовок с изображением и словами, затем под этим заголовком У меня есть 3 блока текста, и мне нужно добавить еще один блок текста под 3 другими. Этот блок должен быть центрирован и расширяться вниз, а не в сторону, когда текст длинный.

Посмотреть пример макета.

Вот живой пример с большим количеством текста.

Вот мой текущий код

<div>
        <div>
            <p>Having trouble viewing this email? <a href="<%=HttpContext.Current.Request.Url.AbsoluteUri %>">View in browser</a></p>
        </div>
    </div>

    <div>
        <div>
            <div>
                <img src="http://ssiclouddev.azurewebsites.net/Content/Images/Icons/favicon-96x96.png" />
                <h2>Susquehanna Software Inc.</h2>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <h4>From:  <% =Request.QueryString["From"] %></h4>
            </div>
            <div>
                <h4>Email: <% =Request.QueryString["FromEmail"] %></h4>
            </div>
            <div>
                <h4>Subject: <% =Request.QueryString["FromSubject"] %></h4>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div>
                    <h4><% =Request.QueryString["Content"] %></h4>
                </div>
            </div>

        </div>
    </div>

html

css

twitter-bootstrap

user-experience

Поделиться

Источник

Bailey Miller

05 июля 2016 в 14:03

3 ответа

Center div content с Bootstrap (center-block)
Могу ли я центрировать содержимое div с помощью центрального блока?? Следующий пример не работает: <div class=form-group> <div class=center-block> <input id=user_registrate type=submit value=Registrate class=btn btn-success /> </div> </div>…
Div Not Center Using in Bootstrap
Я пытаюсь сделать ханойскую башню. Я хочу , чтобы контрольная часть была центром as, поэтому я проверил Bootstrap и использовал class=center-block , но ничего не работает, например: (источник: wuzhiwei.net ) DEMO . Html <div class=container> <div class=panel panel-default> <div…

Заменять

 <div>
      <div>
          <h4><% =Request.QueryString["Content"] %></h4>
      </div>
 </div>

<div>  
        <h4><% =Request.QueryString["Content"] %></h4>
</div>

Поделиться

Nuhel

05 июля 2016 в 14:12

Хорошо, ваш пример на самом деле работает нормально. Но поскольку ваш контент-это всего лишь одно массивное слово, оно продолжается за пределами родительского. Чтобы проверить это, добавьте этот CSS: word-wrap:break-word к вашему h4 .

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

Поделиться

Danny Mahoney

05 июля 2016 в 14:06

HTML (вы не должны помещать col- классов в другой col- класс без нового row ):

<div>
  <div>
    <div>
      <h4><% =Request.QueryString["Content"] %></h4>
    </div>
  </div>
</div>

CSS (позвольте длинным словам прерываться и переноситься на следующую строку):

h4 {
  word-wrap: break-word;
}

Поделиться

max

05 июля 2016 в 14:13

Вертикальный центр выравнивания в Bootstrap 4

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

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

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

Вы можете использовать новые утилиты flexbox & size, чтобы сделать 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 родительский ( .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 родительский ( .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>

Вертикальный центр с использованием Auto Margins Demo

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 — Вертикальный центр с использованием утилит дисплея:

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

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

Вертикальный центр Использование дисплея Utils Demo

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

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

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

body,html {
  height: 100%;
}

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

Также см .:
Вертикальное выравнивание в начальной загрузке 4
Начальная загрузка 4 Центральное вертикальное и горизонтальное выравнивание

Flex · Bootstrap v5.0

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

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

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

<div>Я контейнер Flexbox!</div>

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

<div>Я встроенный контейнер Flexbox!</div>

Адаптивные варианты также существуют для .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
.d-xxl-flex
.d-xxl-inline-flex

Направление

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

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

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>

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

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>

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

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Выравнивание содержимого

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

Флекс элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

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

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Выравнивание элементов

Используйте утилиты align-items на контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по поперечной оси (ось Y в начале, ось X, если flex-direction: column). Выберите start, end, center, baseline или stretch (по умолчанию в браузере).

Флекс элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

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

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.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
.align-items-lg-end
.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-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Выравнивание себя

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

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>

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

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-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-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Заполнение

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

Флекс элемент с большим количеством контента

Флекс элемент

<div>
  <div>Флекс элемент с большим количеством контента</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

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

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

Увеличиваться и сжимайся

Используйте утилиты .flex-grow-* для переключения способности элемента Флекс расти, чтобы заполнить доступное пространство. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, которое могут, а оставшимся двум элементам Флекс их необходимое пространство.

Флекс элемент

Third Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Third Флекс элемент</div>
</div>

Используйте утилиты .flex-shrink-* для переключения способности элемента Флекс сжиматься при необходимости. В приведенном ниже примере второй элемент Флекс с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить место для предыдущего элемента Флекс с .w-100.

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

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

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

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

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

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

С помощью align-items

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

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

Обертка

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

Флекс элемент

<div>
  ...
</div>

Флекс элемент

<div>
  ...
</div>

Флекс элемент

<div>
  ...
</div>

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

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Порядок

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

First Флекс элемент

Second Флекс элемент

Third Флекс элемент

<div>
  <div>First Флекс элемент</div>
  <div>Second Флекс элемент</div>
  <div>Third Флекс элемент</div>
</div>

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

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Кроме того, существуют также адаптивные классы .order-first и .order-last, которые изменяют order элемента, применяя order: -1 и order: 6 соответственно.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

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

Используйте утилиты align-content на контейнерах flexbox для выравнивания элементов Флекс вместе по поперечной оси. Выберите start (по умолчанию для браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы ввели в действие flex-wrap: wrap и увеличили количество элементов Флекс.

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

Флекс элемент

<div>
  ...
</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>...</div>

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

.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-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-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch

Медиа объект

Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

PlaceholderИзображение

Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

And say you want to vertically center the content next to the image:

PlaceholderИзображение

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

Sass

API утилит

Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),

css — Twitter Bootstrap Align Center.

Мне трудно понять, как разместить все в центре. Я использую Twitter Bootstrap 2.

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

Помогите, ребята ?!

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home- Argyle's Automobile</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
    <h2><a href="#">Argyle's Automobile</a></h2>
 </div>

 <!--Navbar-->
 <div>
        <div> <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Social</a></li>
            </ul></div>
</div>

<!--Marketing Area-->
<div><div>

    <h2>Marketing stuff!</h2>
    <br />
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. <br />Fusce dapibus, tellus ac cursus commodo, tortor mauris<br /> condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <br />
    <br />

    <a href="#">Get Started</a>
</div></div>
</div>

<!--Content-->
<div>
    <div>
        <h4>Content 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
    </div>
    <div>
        <h4>Content 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
    </div>
    <div>
        <h4>Content 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
    </div>
</div>
</body>
</html>

gelolopez

10 Фев 2014 в 07:17

2 ответа

Лучший ответ

Оберните весь! # В div.container, а затем удалите лишнее закрывающее </div> в своем отряде героя. Вам не нужно продолжать использовать .container во внутреннем HTML, но это нормально.

Вот рабочий пример:
http://plnkr.co/edit/kgfOjyOla6gAEPumLXd2?p=preview

Вот соответствующие документы BootStrap 2:
http://getbootstrap.com/2.3.2/scaffolding.html

Will
10 Фев 2014 в 04:18

Ваша разметка с использованием Bootstrap неверна. Посетите веб-сайт Twitter Bootstrap, чтобы узнать, как структурировать разметку.

<div></div>

Всегда должен сидеть внутри <div></div>

http://getbootstrap.com/css/#grid-example-fluid

CaribouCode
10 Фев 2014 в 03:26

Flex · Bootstrap v5.0

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

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

   Я контейнер 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
.d-xxl-flex
.d-xxl-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-ряд
.flex-row-reverse
. Гибкая колонка
.flex-колонка-реверс
.flex-sm-ряд
.flex-sm-row-reverse
.flex-sm-колонка
.flex-sm-колонка-реверс
.flex-md-ряд
.flex-md-row-обратный
.flex-md-колонка
.Flex-MD-столбец-обратный
.flex-LG-ряд
.flex-lg-row-обратный
.flex-LG-колонка
.flex-lg-колонка-реверс
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-колонка
.flex-xl-колонка-реверс
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-столбец
.flex-xxl-колонка-реверс

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

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

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

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

Варианты ответа также существуют для 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-около
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md-about
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-между
.justify-content-lg-about
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-между
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-между
.justify-content-xxl-around
.justify-content-xxl-равномерно

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

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

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

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

Адаптивные варианты также существуют для 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-items-xxl-start
.выровнять элементы-XXL-конец
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

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

Используйте утилиты align-self для элементов flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось y для начала, ось x, если flex-direction: столбец ). Выберите один из тех же параметров, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

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

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

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

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

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

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

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

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

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

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

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

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

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

.align-самозапуск
.align-self-end
. Выравнивание-самоцентрирование
.align-self-baseline
. Выравнивание-саморез
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-baseline
.align-self-sm-stretch
.выровнять-сам-мд-старт
.align-self-md-конец
.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
.align-self-xl-start
.выровняйте-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Заливка

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

Flex элемент с большим количеством контента

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

  
   Гибкий элемент с большим количеством контента 
   Элемент Flex 
   Элемент Flex

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

.flex-fill
.flex-sm-fill
.flex-md-fill
.Flex-LG-заполнение
.flex-xl-fill
.flex-xxl-fill

Расти и сжимайся

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

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

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

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

Используйте .flex-shrink- * для переключения способности гибкого элемента сжиматься при необходимости. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить больше места для предыдущего гибкого элемента с .w-100 .

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

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

.flex- {grow | shrink} -0
.flex- {grow | shrink} -1
.flex-sm- {grow | shrink} -0
.flex-sm- {grow | shrink} -1
.flex-md- {grow | shrink} -0
.flex-md- {grow | shrink} -1
.flex-lg- {grow | shrink} -0
.flex-lg- {grow | shrink} -1
.flex-xl- {grow | shrink} -0
.flex-xl- {grow | shrink} -1
.flex-xxl- {grow | shrink} -0
.flex-xxl- {grow | shrink} -1

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

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

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

  
   Элемент 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-reverse
.flex-sm-nowrap
.flex-sm-пленка
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-реверс
.flex-lg-nowrap
.flex-lg-wrap
.Flex-LG-Wrap-Реверс
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Заказать

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

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

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

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

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

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

. Заказ-0
.заказ-1
. Заказ-2
. Заказ-3
. Заказ-4
. Заказ-5
. Заказ-см-0
. Заказ-см-1
. Заказ-см-2
. Заказ-см-3
. Заказ-см-4
. Заказ-см-5
.order-md-0
.order-md-1
.заказ-md-2
. Заказ-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
. Заказ-LG-2
. Заказ-LG-3
. Заказ-LG-4
.order-lg-5
.order-XL-0
.order-XL-1
.order-XL-2
.заказ-XL-3
.order-XL-4
.order-XL-5
.order-xxl-0
.order-xxl-1
. Заказ-XXL-2
. Заказ-XXL-3
. Заказ-XXL-4
. Заказ-XXL-5

Кроме того, существуют также адаптивные классы .order-first и .order-last , которые изменяют порядок элемента , применяя order: -1 и order: 6 соответственно.

. Первый заказ
. Последний заказ
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.заказ-XXL-последний

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

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

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

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

...

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

...

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

...

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

...

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

...

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

...

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

.align-content-start
.align-content-end
.align-контент-центр
.align-content-около
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.выровнять контент-sm-около
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-около
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.выровнять контент-LG-около
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-около
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.выровнять контент-XXL-около
.align-content-xxl-stretch

Хотите реплицировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

PlaceholderImage

  
  
    
  
  
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

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

PlaceholderImage

  
  
    
  
  
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

Sass

Утилиты API

Утилиты

Flexbox объявлены в нашем API утилит в scss / _utilities.scss . Узнайте, как использовать API утилит.

  "изгиб": (
      отзывчивый: правда,
      свойство: flex,
      значения: (заполнить: 1 1 авто)
    ),
    "flex-direction": (
      отзывчивый: правда,
      свойство: flex-direction,
      класс: гибкий,
      значения: строка столбец строка-обратный столбец-обратный
    ),
    "гибкий рост": (
      отзывчивый: правда,
      свойство: flex-grow,
      класс: гибкий,
      ценности: (
        расти-0: 0,
        расти-1: 1,
      )
    ),
    "флекс-термоусадка": (
      отзывчивый: правда,
      свойство: гибкость-усадка,
      класс: гибкий,
      ценности: (
        усадка-0: 0,
        усадка-1: 1,
      )
    ),
    "гибкая пленка": (
      отзывчивый: правда,
      свойство: flex-wrap,
      класс: гибкий,
      значения: wrap nowrap wrap-reverse
    ),
    "зазор": (
      отзывчивый: правда,
      свойство: разрыв,
      класс: разрыв,
      значения: $ spacers
    ),
    "justify-content": (
      отзывчивый: правда,
      свойство: justify-content,
      ценности: (
        начало: гибкий старт,
        конец: гибкий конец,
        center: центр,
        между: пробел-между,
        вокруг: пространство вокруг,
        равномерно: равномерно,
      )
    ),
    "align-items": (
      отзывчивый: правда,
      свойство: align-items,
      ценности: (
        начало: гибкий старт,
        конец: гибкий конец,
        center: центр,
        исходный уровень: исходный уровень,
        растянуть: растянуть,
      )
    ),
    "align-content": (
      отзывчивый: правда,
      свойство: align-content,
      ценности: (
        начало: гибкий старт,
        конец: гибкий конец,
        центр: центр,
        между: пробел-между,
        вокруг: пространство вокруг,
        растянуть: растянуть,
      )
    ),
    "align-self": (
      отзывчивый: правда,
      свойство: align-self,
      ценности: (
        авто: авто,
        начало: гибкий старт,
        конец: гибкий конец,
        center: центр,
        исходный уровень: исходный уровень,
        растянуть: растянуть,
      )
    ),
    "порядок": (
      отзывчивый: правда,
      свойство: заказ,
      ценности: (
        первый: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        последний: 6,
      ),
    ),

html — Bootstrap получить div для выравнивания по центру

html — Bootstrap получить div для выравнивания по центру — qaru

Спросил
5 лет, 7 мес назад

Просмотрено
158k раз

Я пытаюсь выровнять некоторые кнопки на нижнем колонтитуле по центру, но по какой-то причине это не работает.

  
  
    
       Здравствуйте 
    
        
             Re 
             рупий

Я не уверен, нужно ли мне использовать CSS, чтобы поместить его посередине, или мне нужно просто использовать align, но ничего не работает

диппа

50.5k1515 золотых знаков9797 серебряных знаков108108 бронзовых знаков

задан 8 марта ’16 в 22: 552016-03-08 22:55

ВерблюдГорбВерблюд

25311 золотых знаков22 серебряных знака66 бронзовых знаков

В начальной загрузке вы можете использовать .text-center для выравнивания по центру. также добавьте в свой код .row и .col-md- * .

align = устарело,

Добавлен .col-xs- * для демо

  


  
    
      
         Здравствуйте 
      
      
         Re 
         рупий

ОБНОВЛЕНИЕ

(ОКТЯБРЬ 2017)

Для тех, кто читает это и хочет использовать новую версию начальной загрузки (бета-версия), вы можете сделать это проще, используя классы утилит Boostrap Flexbox

  


  
    
       Здравствуйте 
    
    
       Re 
       рупий

Создан 08 мар.

диппасдиппа

50.5k1515 золотых знаков9797 серебряных знаков108108 бронзовых знаков

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

Центрированный контент находится здесь

Бенарджи

14211 золотых знаков22 серебряных знака88 бронзовых знаков

Создан 08 мар.

lang-html

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

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

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

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

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

Как установить столбец по центру с помощью Bootstrap 5?

Здесь цель — центрировать столбец в бутстрапе.Bootstrap — это бесплатный CSS-фреймворк с открытым исходным кодом, предназначенный для гибкой интерфейсной веб-разработки, ориентированной на мобильные устройства. Есть два подхода к центрированию столбца

в Bootstrap.
Подход 1 (смещения):
Первый подход использует бутстрап смещение класса . Главное — установить смещение, равное половине оставшегося размера строки. Так, например, столбец размера 2 будет центрирован путем добавления смещения 5, то есть (12-2) / 2. В приведенном ниже примере это реализуется.
html

< html >
<ссылка link
HREF =
целостность =
"SHA384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm"
crossorigin = "анонимный" / >
< корпус >
< div класс = «контейнер» > 000 0009 class = "ряд" >
< div style = "высота: 200 пикселей;"
class = "col-md-6 offset-md-3
text-center bg-success">.
col-md-6 .offset-md-3 div >
div >

>
кузов >
html >

000
000
000
000
):
Установка для левого и правого полей значения auto центрирует div относительно его родительского элемента.Для левого и правого полей можно задать классы .ml-auto и .mr-auto соответственно. В приведенном ниже примере это реализуется.
html

< html >
<ссылка link
HREF =
целостность =
"SHA384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm"
crossorigin = "анонимный" / >
< корпус >
< div класс = «контейнер» > 000 0009 class = "ряд" >
< div style = "высота: 200 пикселей;"
class = "MR-auto ml-auto
text-center bg-success">
.ml-auto .mr-auto div >
div >
div / корпус >
html >
Выход
0 Bootstrap Form 9: Выровнять по вертикали и по вертикали

Центрирование HTML-элемента по горизонтали с помощью CSS, будь то «div» или «форма», всегда было легко для веб-разработчиков, по крайней мере, в течение последних 10 лет или около того.
Но как насчет центрирования одного и того же элемента по вертикали, чтобы он всегда оставался в центре страницы или в центре своего родительского элемента?
Что ж, это было очень сложной задачей в течение многих лет (по крайней мере, для меня), и некоторые разработчики также использовали JavaScript в некоторых ситуациях для получения желаемого результата.
Это продолжало оставаться проблемой, по крайней мере для меня, до появления макета CSS flexbox и утилит flexbox, предлагаемых в Bootstrap 4.
И именно об этом мы поговорим в сегодняшнем руководстве.
Мы увидим 3 примера , где мы возьмем «div» и «форму». и выровняем их по центру, по вертикали и горизонтали , используя Bootstrap 4 (текущая версия 4.3.1).
По окончании обучения вы можете скачать все файлы в виде удобных шаблонов.
Начнем!
Пример 1. Выровнять «Div» по центру другого «Div», фиксированная высота, не полный экран
В этом первом примере мы выровняем элемент «div» внутри его родительского «div», который имеет фиксированную высоту.Это окончательный результат :
Мы добьемся этого с помощью некоторого кода HTML и CSS и некоторых удобных классов, предлагаемых Bootstrap 4. Давайте сначала посмотрим код, а затем объясним его.
HTML-код (файл index.html, я не показываю весь код страницы):

Bootstrap 4: выровнять по центру

Учебное пособие о том, как выровнять элемент «div» по вертикали и горизонтали в Bootstrap 4.

Это наш "div" с выравниванием по центру.

Код CSS (файл «style.css», папка «assets / css /», я не показываю весь код CSS страницы):
.div-wrapper { высота: 200 пикселей; маржа сверху: 40 пикселей; граница: 2px пунктирная #ddd; радиус границы: 8 пикселей; } .div-to-align { ширина: 75%; отступ: 40 пикселей 20 пикселей; / * .... * / }
Итак, в нескольких словах, мы хотим выровнять div с классом «div-to-align» в центре его родительского div, который имеет класс «div-wrapper» .
Родительский div имеет фиксированную высоту 200 пикселей (устанавливается с помощью CSS).
Чтобы выровнять наш div, мы выполним 3 простых шага :
1. Сначала мы добавляем класс «d-flex» к нашему «div-wrapper» . Делая это, мы включаем гибкое поведение и создаем контейнер flexbox (наш класс «div-wrapper»), а также преобразуем его прямые дочерние элементы в гибкие элементы, как описано в документации Bootstrap здесь.
2. Затем мы добавляем класс «justify-content-center» к нашему «div-wrapper», чтобы выровнять по горизонтали, по центру, его дочерний div (с классом «div-to-align»), тот что мы хотим выровнять.Документация здесь.
3. Наконец, самая важная часть - вертикальное выравнивание. Мы делаем это с помощью , добавляя класс «align-items-center» к нашему «div-wrapper», чтобы выровнять его дочерний div по вертикали по центру. Документация здесь.
Это все для этого примера. Вы можете увидеть LIVE PREVIEW здесь .
Пример 2: Выровнять «форму» по центру страницы, полноэкранный режим
Во втором примере мы узнаем, как выровнять форму, чтобы она всегда оставалась в центре страницы, независимо от устройства или размера экрана.
Это окончательный результат :
Для достижения этого результата нам нужны все родительских элементов нашей формы , теги «div-s», «body» и «html», чтобы имели высоту 100% .
Они должны занимать все пространство страницы по вертикали, чтобы форму можно было разместить в центре этого места.
Мы установили для этих элементов высоту 100% с помощью класса Bootstrap «h-100» .
Мы добавляем этот класс в тег «html» :

И к тегу «body» :

Теперь давайте посмотрим на HTML-код формы и объясним его:

Bootstrap 4: выровнять по центру

Учебное пособие о том, как выровнять «форму» по вертикали и горизонтали в Bootstrap 4.

Имя пользователя:

Пароль:

& копировать; Учебник Bootstrap 4 «Выровнять по центру» от AZMIND .

Как видите, мы также добавляем класс «h-100» к первым двум родительским элементам div формы, «контейнер» и «строка» .
Здесь следует отметить одну важную вещь: мы не использовали класс «d-flex» , который мы использовали в первом примере.
Это связано с тем, что «строк» уже являются контейнерами flexbox в Bootstrap 4 .
Наконец, мы выравниваем форму по горизонтали и вертикали с теми же классами из предыдущего примера: «justify-content-center» и «align-items-center» .
Что касается кода CSS, я не показываю его здесь, потому что я использовал его только для стилизации формы, а не для ее выравнивания. Вы можете найти его в файле «style.css» (папка «assets / css /»).
И мы закончили! LIVE PREVIEW здесь .
Пример 3. Выровняйте «форму» по центру страницы, полноэкранный режим, фон изображения
Последний пример такой же, как и предыдущий, я просто добавил полноэкранный фон изображения с некоторым кодом JavaScript (который вы можете увидеть при загрузке шаблона) и стилизовал форму по-другому.
Код для его выравнивания тоже такой же, поэтому я его больше не показываю.
Мне просто показалось, что он выглядит лучше и более завершенным, (почти) готовым для включения в настоящий проект. Вот почему я добавил его, назовем это «бонусным» примером.
Вот окончательный результат :
А вот и LIVE PREVIEW .
Demo, загрузка и лицензия
ПОСМОТРЕТЬ ДЕМО (все 3 примера)
СКАЧАТЬ:
Bootstrap 4 Align Center (1641 загрузок)

ЛИЦЕНЗИЯ:
Вы можете использовать эти шаблоны в личных и коммерческих проектах, но не можете продавать или распространять их напрямую «как есть».Если вы планируете использовать их, мы будем очень признательны за ссылку на эту страницу или любую форму распространения информации.
Заключение
Bootstrap предлагает несколько удобных и интуитивно понятных утилит flexbox для управления макетами наших страниц, как мы видели в этом руководстве.
Мы использовали всего 3 или 4 класса, чтобы быстро и легко выровнять наши элементы. Это означает значительную экономию времени в нашей повседневной работе по разработке.
Что вы думаете об этом руководстве? У вас есть вопросы или предложения? Позвольте мне знать в комментариях ниже.
Оставайтесь в курсе
Подпишитесь на информационный бюллетень Azmind, и я сообщу вам, как только я выпущу новую тему WordPress, шаблон Bootstrap, учебное пособие или другую бесплатную услугу:
Подписаться
Чтобы узнать, как мы используем ваши данные при подписке на нашу новостную рассылку, прочтите нашу Политику конфиденциальности здесь.
Bootstrap 5 Вертикальное выравнивание - Сообщество разработчиков
Что такое вертикальное выравнивание Bootstrap?

Утилиты вертикального выравнивания позиционируют элементы по оси y.Вы можете центрировать свой контент по нему или выровнять его по верхнему или нижнему краю области просмотра.
Установка

Ручная установка (zip-пакет)

Чтобы использовать этот компонент, сначала необходимо установить пакет MDB 5 Free
MDB CLI

Посмотрите наш Quick Start Tutorial , чтобы раскрыть и использовать весь потенциал MDB 5 и MDB CLI
НПМ

Предпосылки

Перед запуском проекта обязательно установите Node LTS (12.x.x рекомендуется).
Установка

Чтобы установить MDB UI KIT в свой проект, просто введите в терминале следующую команду:
нпм и mdb-ui-kit
Импорт модулей JS

Вы можете импортировать всю библиотеку или только отдельные модули:
импорт * как mdb из mdb-ui-kit; // lib import {Input} from 'mdb-ui-kit'; // модуль
Импорт файла CSS

Для импорта таблицы стилей MDB используйте следующий синтаксис:
@import '~ mdb-ui-kit / css / mdb.min.css ';
Импорт модулей SCSS

Вы также можете импортировать отдельные модули SCSS. Чтобы сделать это правильно, мы рекомендуем скопировать их из каталога node_modules / mdb-ui-kit / src / scss прямо в ваш проект и импортировать так же, как файлы CSS.
Интеграция с Webpack

Вы можете значительно ускорить процесс создания нового проекта на базе Webpack с помощью нашего Starter.
CDN

Установка
через CDN - один из самых простых способов интеграции MDB UI KIT с вашим проектом.Просто скопируйте последний скомпилированный тег сценария JS и тег ссылки CSS из cdnjs в приложение.
Не забудьте также добавить шрифт Font Awesome и Roboto, если вам нужно. Вот пример кода:
CSS

<ссылка href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel = "таблица стилей" /> <ссылка href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel = "таблица стилей" /> <ссылка href = "https: // cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css " rel = "таблица стилей" />
Войти в полноэкранный режимВыйти из полноэкранного режима
JS

<сценарий type = "текст / javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js" >
Войти в полноэкранный режимВыйти из полноэкранного режима
Настройка

Как по вертикали, так и по горизонтали

Добавьте .d-flex к родительскому элементу, чтобы включить гибкий режим. Затем используйте (alsso для родительского элемента) .align-items-center для выравнивания содержимого по вертикали и .justify-content-center для выравнивания содержимого по горизонтали.

Войти в полноэкранный режимВыйти из полноэкранного режима
Параметры Flexbox

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

Важнейшие ресурсы

Вот ресурсы, которые мы подготовили, чтобы помочь вам в работе с этим компонентом:
Читать 📄 Руководство и документация по вертикальному выравниванию <- начать здесь
Чтобы получить максимальную отдачу от своего проекта, вам также следует ознакомиться с другими параметрами макета, связанными с вертикальным выравниванием.См. Раздел ниже, чтобы найти их список.
Вы можете использовать готовые элементы Layout в шаблонах 📥 Starter Bootstrap 5
Шаблоны
являются частью 📦 Free UI Kit for Bootstrap 5
После завершения проекта вы можете опубликовать его с помощью CLI, чтобы получить 💽 Бесплатный хостинг (бета)
Связанные варианты и функции макета

Изучите Bootstrap 5 за 1,5 часа

<br />
Дополнительные ресурсы

Изучите веб-разработку с нашим планом обучения :
🎓 Начать обучение
Присоединяйтесь к нашему списку рассылки и получайте эксклюзивных ресурсов для разработчиков
🎁 Получайте подарки
Присоединяйтесь к нашей частной группе FB для вдохновения и опыта сообщества
👨‍👩‍👧‍👦 Попросите присоединиться
Поддержка создания пакетов с открытым исходным кодом со звездой на GitHub
Как центрировать Div по горизонтали в Bootstrap
Как центрировать Div по горизонтали в Bootstrap
В этой статье мы рассмотрим, как центрировать div по горизонтали.Для этого мы будем использовать bootstrap и css. Ниже мы поделимся некоторыми из наиболее распространенных методов, с помощью которых вы можете легко центрировать div по горизонтали. Так что продолжайте читать…
Center Align Div с использованием CSS
Итак, в основном в этом методе мы используем настраиваемый CSS для выравнивания элемента div по центру по горизонтали. Свойство Margin можно использовать для достижения этого, то есть установив автоматическое значение для левого и бокового поля.
Значение автоматического поля автоматически регулирует элемент div как по левому, так и по правому краю и выравнивает элемент div по центру по горизонтали.Вот код того же.
Центрировать div по горизонтали с помощью CSS <стиль> .container { ширина: 80%; маржа: 0 авто; отступ: 20 пикселей; фон: # f0e68c; } Это заголовок Это абзац.
Другой метод выравнивания элемента
по горизонтали
<название> Как центрировать по горизонтали div с использованием CSS <стиль> div { ширина: 300 пикселей; маржа: авто; граница: сплошной зеленый цвет 3px; красный цвет; } h2, h3 { выравнивание текста: центр; цвет: зеленый; стиль шрифта: курсив; } Кодингшала маржа: авто Codingshala - это универсальное решение для всех ваших потребностей в программировании.
Выводы
Вот как вы можете выровнять блок элемента div по горизонтали. Также прочтите: Создание динамической панели выполнения в Bootstrap
Адаптивное изображение центра с использованием чистого CSS или Bootstrap 3/4
В одном из наших предыдущих вопросов от пользователя я ответил о том, как вертикально выровнять центр изображения внутри div с помощью CSS, но в этой статье я собираюсь предоставить вы кодируете пример для выравнивания изображения по центру с помощью Pure CSS или Bootstrap 3 и 4.
Адаптивное изображение, выровненное по центру с использованием только CSS
Итак, давайте сначала проверим чистую версию CSS, которая может быть полезна, если вы не хотите использовать Bootstrap для своего веб-приложения.
Вы можете просто выровнять любое изображение по центру с помощью свойств CSS, таких как « margin: 0 auto » и « display: block »
margin: 0 auto; дисплей: блок;
вот полный пример, предположим, это ваш HTML
Вот ваш текст, который хорош, давайте назначим изображение ниже в центре
А вот CSS для него
.img-responsive { маржа: 0 авто; дисплей: блок; }
Тогда вы получите результат, как показано ниже.
Использование "text-align: center"
Вы также можете просто использовать свойство " text-align: center ", но вам нужно обернуть свой " img "внутри тега" div ", а затем используйте этот CSS для" div "

CSS
.MainDiv { выравнивание текста: центр; }
Использование «Flexbox»
Это еще один чистый CSS-подход, в котором мы будем использовать свойство flexbox для идеального центрирования изображения внутри как по вертикали, так и по горизонтали.
Для этого вам необходимо использовать приведенный ниже CSS для элемента «контейнер», который оборачивает элемент img

CSS
.container { дисплей: гибкий; align-items: center; justify-content: center; высота: 100%; }
Вот пример скрипта для него
Использование свойства "Position"
Вы можете использовать приведенный ниже CSS для центрирования изображения, используя свойство "position"
img { дисплей: блок; положение: относительное; осталось: -50%; } .MainDiv { позиция: абсолютная; осталось: 50%; }
Учитывая, что у вас есть HTML, как показано ниже

Выровнять изображение в центре с помощью Bootstrap
Хотя приведенное выше решение очень просто с использованием чистого CSS, вы также можете использовать встроенные классы Bootstrap, что полезно, если вы уже используете Bootstrap в своем веб-приложении .
Итак, если вы используете Bootstrap 3 или 4, вы можете использовать « center-block » для изображения, чтобы выровнять его по центру как для настольных, так и для мобильных устройств.
Класс .img-responsive с .center-block обеспечивает хорошее масштабирование изображения по отношению к родительскому элементу (измените размер окна браузера, чтобы увидеть эффект):
Вот результат, который вы должны увидеть в своем браузере.
Вот и все, вы также можете использовать аналогичные классы в Bootstrap 4.
Вы также можете прочитать:
Лучшие инструменты управления исходным кодом (инструменты контроля версий)
Создание кнопки переключения начальной загрузки (простой способ)
Форма входа и регистрации в HTML, CSS и Bootstrap 4
Как использовать the: after And: before Псевдоэлементы в CSS
.
Category Разное