Dropdown list won't align vertically with dropdown button

I have a drop down button which when click drops down a list of options for the user, I have it in a column but I wanted it centered in the column. I used text-align: center; to achieve this, but when I actually click the button, the list drops down to the left of the button, not directly below it. I have tried to style the list but nothing seems to change. I'm not sure if text-align: center; was the correct way to center this element. I'm using Javascript to toggle the list, so I also tried styling the class <div class=dropdown open> as class open is added when the function executes. The code is below:

<div id="option-selection">
                <h3>Select an Option</h3>
                <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Available Options&nbsp&nbsp<span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                  </ul>
               </div><!--dropdown-->
</div><!--option selection-->

And the CSS for the dropdown button:

#option-selection {
text-align: center;
padding-top: 5px;
padding-bottom: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

Set the .dropdown's display as inline block so that its bounding box is set to the size of its contents.

#option-selection .dropdown {
  display:inline-block;
}

Live example here: http://www.bootply.com/L6evJPHbRe