Javascript 水平居中

我有以下代码：

<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%）

---

在

下拉滚动条上设置
位置：相对

.dropdown-scroll {
    position: relative;
}

并将下拉列表的位置设置为
绝对值
：

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

为
ul