Я хочу сделать div
палку в верхней части экрана без какого-либо влияния на другие элементы, а ее дочерний элемент в центре.
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
Когда я добавляю position: absolute
строку, она justify-content: center
становится недействительной. Конфликтуют ли они друг с другом и какое решение?
РЕДАКТИРОВАТЬ
Спасибо, ребята, это проблема родительской ширины. Но я использую React Native, поэтому не могу установить width: 100%
. Пробовал, flex: 1
и align-self: stretch
оба не работают. В итоге я использовал Размеры, чтобы получить всю ширину окна, и это сработало.
РЕДАКТИРОВАТЬ
Что касается более новой версии React Native (я использую 0.49), она принимает width: 100%
.
css
react-native
flexbox
Стэнли Луо
источник
источник
Ответы:
Нет, абсолютно позиционирование не конфликтует с гибкими контейнерами. Превращение элемента в гибкий контейнер влияет только на его внутреннюю модель компоновки, то есть на способ компоновки его содержимого. Позиционирование влияет на сам элемент и может изменить его внешнюю роль в макете потока.
Что означает, что
Если вы добавите абсолютное позиционирование к элементу с
display: inline-flex
, он станет блочным (напримерdisplay: flex
), но все равно будет генерировать контекст гибкого форматирования.Если вы добавите абсолютное позиционирование к элементу с помощью
display: flex
, он будет изменен с использованием алгоритма сжатия по размеру (типичного для контейнеров встроенного уровня) вместо алгоритма с возможностью заполнения.Тем не менее, конфликты абсолютного позиционирования с дочерними элементами гибкости .
источник
вы забыли ширину родителя
.parent { display: flex; justify-content: center; position: absolute; width:100% }
<div class="parent"> <div class="child">text</div> </div>
источник
Вы должны передать текст
width:100%
родителюcenter
..parent { display: flex; justify-content: center; position: absolute; width:100% }
<div class="parent"> <div class="child">text</div> </div>
Если вам также нужно выровнять по центру по вертикали, дайте
height:100%
иalign-itens: center
.parent { display: flex; justify-content: center; align-items: center; position: absolute; width:100%; height: 100%; }
источник
В моем случае проблема заключалась в том, что у меня был другой элемент в центре div с конфликтующим z-индексом.
.wrapper { color: white; width: 320px; position: relative; border: 1px dashed gray; height: 40px } .parent { position: absolute; display: flex; justify-content: center; top: 20px; left: 0; right: 0; /* This z-index override is needed to display on top of the other div. Or, just swap the order of the HTML tags. */ z-index: 1; } .child { background: green; } .conflicting { position: absolute; left: 120px; height: 40px; background: red; margin: 0 auto; }
<div class="wrapper"> <div class="parent"> <div class="child"> Centered </div> </div> <div class="conflicting"> Conflicting </div> </div>
источник