Andrei Andrei - 1 year ago 95
jQuery Question

Dropdown center alignment to button

I'm trying to align the

dropdown centered to the button clicked as seen at, but can't seem to get the right pull or class that needs to be used.


<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>
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu">
<li><a href="#" data-value="60">1 min</a></li>

Ideally, I'd love to see the
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 Source

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 */


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download