How to set the dropdown button in the center?

Dropdown menu is a menu that offers a list of options to choose from. The title of the menu is always in display and the rest of the items are hidden. It is a toggleable menu in which all the items can be shown by clicking on it.

Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.

Example: Here, the property “text-align: center” aligns the content of dropdown div to center, which sets the dropdown button to the center.





<!DOCTYPE html>
        <link rel="stylesheet" 
              crossorigin="anonymous" />
            .my-menu {
/*Sets all the content of dropdown div to center*/
                text-align: center; 
<!-- my-menu class is added to dropdown div for styling-->
        <div class="dropdown my-menu">
            <button class="btn btn-secondary 
                Dropdown button
            <div class="dropdown-menu" 
                <a class="dropdown-item" 
                   href="#">Action 1</a>
                <a class="dropdown-item" 
                   href="#">Action 2</a>
                <a class="dropdown-item" 
                   href="#">Action 3</a>
        <script src="" 
        <script src=
        <script src=



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :

Be the First to upvote.

Please write to us at to report any issue with the above content.