title: Bootstrap 3 dropdown menu center align not working
body: <p>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:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right" id="headerDropdowns"&gt;
    &lt;li&gt;&lt;div class="btn-toolbar"&gt;
      &lt;div class="btn-group"&gt;
        &lt;button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000"&gt;Our Difference&lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Made in the USA&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Human Grade&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Ingredients Fresh&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;USDA Meats&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Our Story&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Campare&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In which class dropdown-menu, or nav navbar-nav, should I do the aligment, and what should I set?</p>