在 div 中水平居中 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
}