Dropdown list won't align vertically with dropdown button

Question

I have a drop down button which when click drops down a list of options for the user, I have it in a column but I wanted it centered in the column. I used text-align: center; to achieve this, but when I actually click the button, the list drops down to the left of the button, not directly below it. I have tried to style the list but nothing seems to change. I'm not sure if text-align: center; was the correct way to center this element. I'm using Javascript to toggle the list, so I also tried styling the class <div class=dropdown open> as class open is added when the function executes. The code is below:

<div id="option-selection">
                <h3>Select an Option</h3>
                <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Available Options&nbsp&nbsp<span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                  </ul>
               </div><!--dropdown-->
</div><!--option selection-->

And the CSS for the dropdown button:

#option-selection {
text-align: center;
padding-top: 5px;
padding-bottom: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

possible duplicate of [vertical-align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Ryan, Sep 10 '15 at 16:23
It has the same answer: "Bootstrap is not perfect you will have to write some of your own css to fix some issues, remember you can always use a custom class". Bootstrap is not a silver bullet to all css problems and we are not here to do your work for you. — Ryan, Sep 10 '15 at 16:29
possible duplicate of [Bootstrap 3 dropdown menu center align not working](http://stackoverflow.com/questions/25610774/bootstrap-3-dropdown-menu-center-align-not-working) — vanburen, Sep 10 '15 at 16:31
If you read the question clearly I said I tried to style the list but couldn't get it to work, so actually if we're going into semantics then I had tried exactly what the answer from that post said to do: "write some of your own css to fix some issues". I couldn't get it to work, hence the new article. — coopwatts, Sep 10 '15 at 16:33

score 3 · Accepted Answer · answered Sep 10 '15 at 16:31

3

Set the .dropdown's display as inline block so that its bounding box is set to the size of its contents.

#option-selection .dropdown {
  display:inline-block;
}

Live example here: http://www.bootply.com/L6evJPHbRe

answered Sep 10 '15 at 16:31

Marcelo

4,395
1
18
30

Thank you! This makes sense. – coopwatts Sep 10 '15 at 16:37
Indeed most elegant solution, although the other ones work as well. – Saar Sep 10 '15 at 16:39

score 1 · Answer 2 · answered Sep 10 '15 at 16:35

This fixes your issue for whichever width the list is.

   .open>.dropdown-menu{
        text-align: center;
        left: 50%;
        transform: translate3d(-50%,0,0);
    }

http://codepen.io/Saar/pen/EVVZPE

The text-align: center; just make sure that the text of the options themselves are aligned to the center as well.

score 0 · Answer 3 · answered Sep 10 '15 at 16:26

If you know the width of your select list, you could override the Bootstrap CSS which is absolute positioning the element to the left, adding some extra CSS:

.open>.dropdown-menu {
    width: 160px;
    left: 50%;
    margin-left: -80px;
}

See demo here https://jsfiddle.net/Lrogdbr4/2/

Vinícius Alvarenga · Answer 4 · 2015-09-10T16:50:27.160

You can try to use this to overrride twitter bootstrap .dropdown-menu class.

.dropdown-menu {
    position: relative;
    left: auto !important;
    float: none !important;
    margin: auto;
}

Or

#option-selection {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 25px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 160px;
    margin: 0 auto;
}

.dropdown-menu {
    position: absolute;
    left: auto;
    float: none;
}

Dropdown list won't align vertically with dropdown button

4 Answers4