Как центрировать Bootstrap drop down

Question

После нажатия кнопки выпадающее меню выровнено влево.
Как вы можете выпадающее меню выровнять по центру экрана?

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div align="center" class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
 
    Dropdown Example 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul float: right class="dropdown-menu"> 
 
    <li><a href="#">This</a></li> 
 
    <li><a href="#">That</a></li> 
 
    <li><a href="#">Those</a></li> 
 
    </ul> 
 
</div>

Answer 1

добавить следующий CSS

.dropdown-menu{ 
      margin-left:calc(50% - 80px); 
      margin-right:calc(50% - 80px);} 

Вот fiddle

Answer 2

Jarvis Привет там.

Попробуйте это ... Просто добавьте Bootstrap классtext-center.

К этой строке в вашем блоке кода навигатора.

<div id="navbar" class="collapse navbar-collapse text-center"> 
      <ul class="nav navbar-nav navbar-right"> 

Это поместит текст списка посередине.

Адрес Fiddle.