Andrei Andrei - 1 month ago 20
jQuery Question

Dropdown center alignment to button

I'm trying to align the

<ul>
dropdown centered to the button clicked as seen at http://jsfiddle.net/em0nh0pw/, but can't seem to get the right pull or class that needs to be used.

Specifically:

<button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown">
<span class="badge">10 min</span>&nbsp;&nbsp;
<span class="glyphicon glyphicon-edit"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu">
<li><a href="#" data-value="60">1 min</a></li>
[..]
</ul>


Ideally, I'd love to see the
<ul>
menu show centered over the button both vertically and horizontally, but can't seem to get that right either. Any help is greatly appreciated!

Answer

If you need to center the ul, it can be easily done using translateX.

You need to change one and add one line of CSS:

On .dropdown-menu:

left: 50%; /* instead of left: 0; */
transform: translateX(-50%); /* add this one */

JSFiddle