Как центрировать подпункт раскрывающегося меню родительскому?

Question

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

Вот ссылка на мой код: https://jsfiddle.net/pg60qetq/1/

Я уже попытался установить margin: auto; или установить left: -50%; right: -50% вместе с другими решениями, которые я нашел в Интернете, но ничего, кажется, работает для меня.

Не могли бы вы, пожалуйста, предложить что-нибудь? Спасибо xD

Answer 1

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

$(".dropdown-content").each(function() { 
    $(this).css({ 
     'left' : '50%', 
     'margin-left' : $(this).width()/2 * - 1 + 'px' 
    }); 
}); 

Вот мой Fiddle: https://jsfiddle.net/pg60qetq/3/

мне пришлось немного изменить до CSS. Я изменил позицию с DIV на UL, удалил некоторые проблемные высоты и свойства переполнения.

Надеюсь, это поможет.

Answer 2

ОК, поэтому ваши родители имеют фиксированную ширину, дети больше родительского элемента, а также min-width: 150px. Предполагается, что родитель должен быть ориентирован на ребенка.

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

Чтобы убедиться, что ваш родитель знает, где находится центр детей, дети должны иметь некоторый дисплей: настройка, отличная от «none», поскольку это заставляет их не занимать места, и они должны располагаться относительно , Поскольку мы все еще хотим, чтобы элемент был скрыт, когда он не был виден, мы дадим ему высоту 0 и visiblity: hidden;

li.dropdown { 
    display: inline-block; 
    text-align: center; 
} 

.dropdown-content { 
    visibility: hidden; 
    height: 0; 
    position: relative; 
    min-width: 160px; 
    text-align: center; 
} 

.dropdown:hover .dropdown-content { 
    visibility: visible; 
    height: auto; 
} 

я уменьшил свой тест-случай для одного выпадающего списка:

https://jsfiddle.net/pg60qetq/1/

Таким образом, родители будет занимать столько же места, как они будут, когда колебались, хотя.

Вот версия со всеми тремя выпадающие: https://jsfiddle.net/pg60qetq/2/ Теперь, так как родитель фактически больше, элементы завернуть на маленьком дисплее.