I'm trying to center my dropdown menu in Bootstap. 

 <ul class="dropdown-menu">

It pulls to the left by default, or I could use pull-right defined as follows to make it go to the right:

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

I want to center it though. I'm new to Boostrap and can't figure out how to center it. Any tips? I tried right:50% but that didn't work.

Note: I'm not looking to center the actual text in the dropdown menu. I'm looking to center the actual dropdown menu and carret under the navigation menu item that it drops down from.

Here is my full code snippet in my template:

<ul class="nav">
    <li id="tab_profile">
        <a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a>
    </li>
    <li id="product_data">
        <a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a>
    </li>
    <li id="product_library">
        <a href="{% url library %}">{% trans "LIBRARY" %}</a>
    </li>
  <li id="database">
        <a href="/DATABASE/">{% trans "DATABASE" %}</a>
    </li>
        <li class="dropdown" id = "community">
        <a class="dropdown-toggle" href="#">COMMUNITY</a> 
             <ul class="dropdown-menu pull-right">
                <li> <a href="/profiles">Search</a></li>
                <li><a href="/questions/">Questions and Answers</a></li>
                <li><a href="{% url view_requests %}">Requests</a></li>
              </ul>
        </li>
</ul>

CSS:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 4px 0;
  margin: 1px 0 0;
  list-style: n
html css twitter-bootstrap
Edit
Report