Using Bootstrap Dropdown on a centered image - css

Question

I am trying to use the Bootstrap dropdown on a centered image, but I can't get the dropdown to be centered as well.
Fiddle with my current code
<div class="row">
<div class="col-md-12 profile-picture text-center">
<div class="dropdown col-md-3">
<img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
<ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
</ul>
</div>
</div>
</div>
As you can see the dropdown gets aligned to the left, is there a way to get it to be centered underneath the image? It's in a col-md-3 so try resizing the screen as well.

Answer 1

Add display:inline-block to your dropdown.
.dropdown
{
display: inline-block;
}
Here's a fiddle.

Answer 2

position: absolute, left:0px and float:left are the causes.
Fix:
.profile-picture .dropdown-menu {
position: relative;
clear: both;
float: none;
}
The width will stick the the width of the column :)
If you don't like that, use these, or remove the column setup:
width: 170px;
margin: 0 auto;

Answer 3

See updated fiddle
This would be one solution, which will work responsively as long as you declare a width for the menu:
.profile-photo {
width: 170px;
height: 170px;
margin: 0 auto;
display: block;
}
.dropdown-menu {
margin-left: -85px;
width: 170px;
left: 50%;
position: absolute;
}
I removed your col-md-3 as you are just positioning the menu halfway across the col-md-12 with this method.