css - Using Bootstrap Dropdown on a centered image -

i trying use bootstrap dropdown on centered image, can't dropdown centered well.

fiddle 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 can see dropdown gets aligned left, there way centered underneath image? it's in col-md-3 try resizing screen well.

add display:inline-block dropdown.

.dropdown {     display: inline-block; } 

here's fiddle.