Skip to content
Related Articles

Related Articles

Improve Article

How to set the dropdown button in the center?

  • Last Updated : 26 Aug, 2020

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
Recommended Articles
Page :