title: horizontally center ul in div
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div class="dropdown dropdown-scroll" style="text-align:center"&gt;
      &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
          Serial No.&lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
          &lt;li role="presentation"&gt;
              &lt;div class="input-group input-group-sm search-control"&gt;
                  &lt;span class="input-group-addon"&gt;
                      &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;input type="text" class="form-control" placeholder="Query" ng-model="query" /&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li role="presentation" ng-repeat='serial_no in serial_nos | filter:query'&gt;
              &lt;a href="{{'{{serial_no.id}}'}}"&gt;{{'{{serial_no.id}}'}}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>style="text-align:center"</code> is aligning (horizontally) the div element, but when the dropdown is selected, my list items are aligned at the left side of the page.</p>
  
  <ul>
  <li><p>How can I get them positioned directly under the drop down button?</p></li>
  <li><p>How can I get everything positioned vertically (maybe 25% from the top) on the page?</p></li>
  </ul>