Как центрировать div горизонтально и вертикально внутри контейнера, используя flexbox. В приведенном ниже примере я хочу, чтобы каждое число находилось ниже друг друга (в строках), которые расположены по центру по горизонтали.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
row{
который не влияет на строки. Если вы измените его,.row{
результат будет совершенно другим.Ответы:
Я думаю, что вы хотите что-то вроде следующего.
Смотрите демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/tFscL/
Ваш
.flex-item
элементы должны быть на уровне блока (div
а неspan
), если вы хотите, чтобы высота и верхний / нижний отступы работали правильно.Кроме того, на
.row
установите ширинуauto
вместо100%
.Ваши
.flex-container
свойства в порядке.Если вы хотите,
.row
чтобы центр по вертикали находился в окне просмотра, присвойте высоту 100%html
иbody
, а также обнулитеbody
поля.Обратите внимание, что
.flex-container
для просмотра эффекта вертикального выравнивания необходима высота, в противном случае контейнер вычисляет минимальную высоту, необходимую для вложения содержимого, которая в этом примере меньше высоты порта просмотра.Сноска: , ,
flex-flow
flex-direction
flex-wrap
свойства могли бы сделать этот проект проще реализовать. Я думаю, что.row
контейнер не нужен, если вы не хотите добавить стили вокруг элементов (фоновое изображение, границы и т. Д.).Полезный ресурс: http://demo.agektmr.com/flexbox/
источник
Как центрировать элементы по вертикали и горизонтали во Flexbox
Ниже приведены два общих решения для центрирования.
Один для выровненных по вертикали изгибаемых элементов (
flex-direction: column
), а другой для горизонтально выровненных изогнутых элементов (flex-direction: row
)В обоих случаях высота центрированных элементов может быть переменной, неопределенной, неизвестной, что угодно. Высота центрированных элементов не имеет значения.
Вот HTML для обоих:
CSS (исключая декоративные стили)
Когда гибкие элементы сложены вертикально:
DEMO
Когда гибкие элементы сложены горизонтально:
Настройте
flex-direction
правило из кода выше.DEMO
Центрирование содержимого гибких элементов
Область контекста гибкого форматирования ограничена отношениями родитель-потомок. Потомки гибкого контейнера за пределами дочерних элементов не участвуют в гибком макете и будут игнорировать свойства flex. По сути, гибкие свойства не наследуются за пределами детей.
Следовательно, вам всегда нужно применять
display: flex
илиdisplay: inline-flex
к родительскому элементу, чтобы применить свойства flex к дочернему элементу.Для вертикального и / или горизонтального центрирования текста или другого содержимого, содержащегося в гибком элементе, сделайте элемент (вложенным) гибким контейнером и повторите правила центрирования.
Подробнее здесь: Как выровнять текст по вертикали во flexbox?
Кроме того, вы можете применить
margin: auto
к элементу содержимого элемента flex.Узнайте о
auto
полях сгиба здесь: Методы выравнивания элементов Flex (см. Вставку № 56).Центрирование нескольких строк изгибаемых элементов
Когда гибкий контейнер имеет несколько строк (из-за переноса),
align-content
свойство будет необходимо для выравнивания по оси.Из спецификации:
Подробнее здесь: Как flex-wrap работает с align-self, align-items и align-content?
Поддержка браузера
Flexbox поддерживается всеми основными браузерами, кроме IE <10 . В некоторых последних версиях браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков . Для быстрого добавления префиксов используйте Autoprefixer . Подробнее в этом ответе .
Центрирующее решение для старых браузеров
Для альтернативного решения для центрирования, использующего таблицу CSS и свойства позиционирования, смотрите этот ответ: https://stackoverflow.com/a/31977476/3597276
источник
Добавить
к элементу контейнера того, что вы хотите центрировать. Документация: justify-content и align-items .
источник
display: inline-flex
в моем случае, но это было легко отредактировать).Не забудьте использовать важные атрибуты браузера:
align-items: center; ->
justify-content: центр; ->
Вы можете прочитать эти две ссылки для лучшего понимания flex: http://css-tricks.com/almanac/properties/j/justify-content/ и http://ptb2.me/flexbox/
Удачи.
источник
1 - установить CSS для родительского div в
display: flex;
2 - Установите CSS для родительского div на
flex-direction: column;
Обратите внимание, что это сделает весь контент в этой строке div сверху вниз. Это будет работать лучше всего, если родительский div содержит только дочерний элемент и ничего больше.
3 - Установите CSS для родительского div в
justify-content: center;
Вот пример того, как будет выглядеть CSS:
источник
Вы можете использовать
display: flex; align-items: center; justify-content: center;
на вашем родительском компоненте
https://repl.it/repls/TomatoImaginaryInitialization
источник
diplay: flex;
для его контейнера иmargin:auto;
для его элемента работает отлично.ПРИМЕЧАНИЕ. Вы должны настроить
width
и,height
чтобы увидеть эффект.источник
Если вам нужно центрировать текст в ссылке, это поможет:
источник
margin: auto
отлично работает с flexbox. Централизуется вертикально и горизонтально.источник
РЕЗУЛЬТАТ:
КОД
HTML:
CSS:
где
flex-container
div используется для центрирования вашегоrows
div по вертикали и горизонтали , аrows
div используется для группировки ваших «элементов» и упорядочения их по столбцам.источник
источник
Использование CSS +
посмотрите ЗДЕСЬ
источник