水平居中UL

Question

我有以下代码：

<div class="dropdown dropdown-scroll" style="text-align:center"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     Serial No.<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
     <li role="presentation"> 
      <div class="input-group input-group-sm search-control"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-search"></span> 
       </span> 
       <input type="text" class="form-control" placeholder="Query" ng-model="query" /> 
      </div> 
     </li> 
     <li role="presentation" ng-repeat='serial_no in serial_nos | filter:query'> 
      <a href="{{'{{serial_no.id}}'}}">{{'{{serial_no.id}}'}}</a> 
     </li> 
    </ul> 
</div> 

style="text-align:center"正在调整（水平）的div元素，而是选择了下拉的时候，我的列表项在页面的左侧对齐。

• 如何让它们直接位于下拉按钮下方？

• 如何在页面上垂直放置所有东西（可能是顶部的25％）？

Answer 1

在dropdown-scroll DIV设置position:relative：

.dropdown-scroll { 
    position: relative; 
} 

并设置下拉列表的位置absolute：

.dropdown-menu { 
    position: absolute; 
    top: 0; //adjust according to need 
    left: 0; //adjust according to need 
}