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?

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

Solution 2

You can do this as long as you're willing to give the dropdown ul a fixed width. See code below:

.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

First 2 declarations are for visualization purposes, but the important part is the 3rd line. You'll need to define a width (in this case 200px) and then a margin-left equal to half the width. This will work with any width, no matter if the button is at the right, left or between elements (but of course you'll probably need some space for the button element)

You can see a fiddle here

Solution 3

The only, ugly way is to set the position depending on your needs like:

.dropdown-menu{
    right: -25px !important;
}

Fiddle

But thas not the way it should be used. Keep in mind that you have to adjust the setting for all media devices.