Bootstrap dropdown menu does not position correctly - html

Question

When I place a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", the dropdown menu appears in the original un-centered position of the dropdown. The dropdown doesn't seem to know that its triggering button has been moved.
The issue is represented in this jsfiddle:
https://jsfiddle.net/dkent600/wyos4ukt
The fiddle contains the following code:
<div style="background-color:grey; text-align:center">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
</ul>
</div>
</div>
Thanks for any clues for how to fix this.

Answer 1

If you add the class btn-group to the .dropdown element, then the dropdown-menu will be positioned properly.
Updated Exmple
<div class="btn-group dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
The reason this works is because the class adds the following CSS. In doing so, the dropdown-menu is positioned absolutely relative to the parent element.
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
Alternatively, you could also add the following:
Updated Example
.dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}