Я не могу выровнять выпадающее меню к центру родителя, на котором выпадающее меню открывается с помощью наведения. Я попытался выровнять текст: центр для всех элементов .nav.navbar li, и он не работает. Я попытался установить маржу и оставил: 50% для всего меню ul.dropdown, которое является выпадающим списком, и оно не работает. Вот код html:
<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
<li><div class="btn-toolbar">
<div class="btn-group">
<button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Made in the USA</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Human Grade</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">USDA Meats</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Our Story</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Campare</a></li>
</ul>
</div>
</li>
</ul>
В каком классе выпадающее меню или nav navbar-nav, должен ли я делать aligment и что я должен установить?
Вы можете использовать преобразование, чтобы избежать использования фиксированной ширины:
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
Ответ под влиянием http://css-tricks.com/centering-percentage-widthheight-elements/
Вы можете сделать это, пока вы готовы предоставить раскрывающийся список ul фиксированной ширины. См. Следующий код:
.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}
Первые 2 объявления предназначены для визуализации, но важная часть - 3-я строка. Вам нужно будет определить ширину (в данном случае 200px), а затем a margin-left, равную половине ширины. Это будет работать с любой шириной, независимо от того, находится ли кнопка справа, слева или между элементами (но, конечно, вам, вероятно, потребуется некоторое пространство для элемента button)
Вы можете увидеть скрипку здесь
Единственный, уродливый способ - установить позицию в зависимости от ваших потребностей, например:
.dropdown-menu{
right: -25px !important;
}
Но не так, как следует использовать. Имейте в виду, что вам необходимо настроить настройку для всех мультимедийных устройств.