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>
<html>
    <head>
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
              crossorigin="anonymous" />
  
        <style>
            .my-menu {
/*Sets all the content of dropdown div to center*/
                text-align: center; 
            }
        </style>
    </head>
  
    <body>
<!-- my-menu class is added to dropdown div for styling-->
        <div class="dropdown my-menu">
            <button class="btn btn-secondary 
                           dropdown-toggle" 
                    type="button"
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true" 
                    aria-expanded="false">
                Dropdown button
            </button>
            <div class="dropdown-menu" 
                 aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" 
                   href="#">Action 1</a>
                <a class="dropdown-item" 
                   href="#">Action 2</a>
                <a class="dropdown-item" 
                   href="#">Action 3</a>
            </div>
        </div>
  
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
                integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
                crossorigin="anonymous">
      </script>
        <script src=
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
                crossorigin="anonymous">
      </script>
        <script src=
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
                crossorigin="anonymous">
      </script>
    </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :