Bootstrap 3 dropdown menu center align not working

Question

I am not able to align the dropdown to the center of the parent on which the dropdown is opened with hover. I have tried to text-align: center for the entire .nav .navbar li elements, and it doesn't work. I have tried to set margin and left: 50% for the entire ul.dropdown-menu that is the dropdown and it doesn't work. Here is the html code:

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

In which class dropdown-menu, or nav navbar-nav, should I do the aligment, and what should I set?

Answer 1

You can use transform to avoid having to use fixed widths:

.dropdown-menu {   left: 50%;   right: auto;   text-align: center;   transform: translate(-50%, 0); } 

Answer influenced by http://css-tricks.com/centering-percentage-widthheight-elements/