Centering dropdown menu using Bootstrap

Question

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: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  margin-right: auto; 
  margin-left: auto;
}

Answer 1

.dropdown-menu {
    left: 50% !important;
    margin-left: -70px;
}

This worked for me when using a default bootstrap drop down menu. Just adjust the margin-left depending on how wide your menu is.

Answer 2

You can add below as CSS and give this class in tag as shown below.

.centerDropdown {
    left: auto !important;
    right: -25% !important;
}
.centerDropdown:after {
   left: auto !important;
   right: 45% !important;
}

In HTML Code,

<li class="dropdown">
   <a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle">
        <i class="icon-th-list"></i>
           Lists
   </a>
   <ul class="dropdown-menu centerDropdown">
          <li><a href="/list">Find a list</a></li>
          <li><a href="/my">My lists</a></li>
          <li><a href="/create">Create a list</a></li>
   </ul>
 </li>