title: Center bootstrap dropdown menu
body: <p>I'm having an issue centering the dropdown menu buttons. I'm using bootstrap in <code>ASP.NET MVC 5</code>. </p>
  
  <p>Here is the html code:</p>
  
  <pre><code>            &lt;div class="navbar-center"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;HR Online&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Job Postings&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;HR Manual&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Training&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  </code></pre>
  
  <p>Im using a div that encompasses the entire dropdown menu. It's class name is "navbar-center"
  I can use padding it will work. But I don't believe that is the most effecient way of centering it. </p>
  
  <p>I have used <code>align-content</code>, <code>align-items</code> and <code>align-self</code>. None of them work. Do I have to stick with <code>padding</code>?   </p>
  
  <p>NOTE: its not the text I want to align, it's the buttons. (The buttons you press before it drops down a menu)</p>