When you click on the menu, the dropdown typically aligns to the left. How can you adjust the alignment so that the dropdown appears in the center of the screen?
<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>