horizontally center ul in div

Question

I have the following code:

<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" is aligning (horizontally) the div element, but when the dropdown is selected, my list items are aligned at the left side of the page.

• How can I get them positioned directly under the drop down button?

• How can I get everything positioned vertically (maybe 25% from the top) on the page?

Answer 1

Set position:relative on the dropdown-scroll div:

.dropdown-scroll {
    position: relative;
}

And set your dropdown's position to absolute:

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