How to Center a CSS Drop Down Menu

How To Center A CSS Drop Down Menu

replace this css with what you have for #cssmenu > ul > li:

#cssmenu > ul > li {

    display:inline-block;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}

and add this to your css codes:

 #cssmenu > ul {
        text-align:center;
 }

here it is: http://jsfiddle.net/y4vDC/10/

how do i align my css drop down menu in center?

Low Hanging Fruit answer:

The easiest fix is set the ul to be display: inline-block and set the containing div to be width: 100%; and text-align: center.

body {  background-image: url(2cg3c.jpg);}.menu-container {    width: 100%;    text-align: center;}ul {  margin: 0;  padding: 0;  list-style: none;  display: inline-block;}ul li a {  text-decoration: none;  color: white;  display: block;}ul li {  float: left;  width: 200px;  height: 40px;  background-color: black;  font-size: 20px;  line-height: 40px;  text-align: center;  opacity: .7;  border: 3px solid #285189;}ul li a:hover {  background-color: red;}ul li ul li {  display: none;}ul li:hover ul li {  display: block}
<!DOCTYPE html><html>
<head>  <title>Sweets</title>  <link rel="stylesheet" type="text/css" href="project1.css" </head>
  <body>
    <div class="menu-container">      <ul>        <li><a href="#">1</a>          <ul>            <li><a href="#">2</li>      <li><a href="#">3</li>      <li><a href="#">4</li>      <li><a href="#">5</li>          </ul>    </li>    <li><a href="#">6</a>            </li>            <li><a href="#">7</a>            </li>            <li><a href="#">8</a>            </li>            <li><a href="#">9</a>            </li>          </ul>    </div>
  </body>
</html>

position dropdown button and dropdown menu in center?

A little trick add some css rules,text-center with dropdown class and dropdown-menu-center to the list.

source: https://stackoverflow.com/a/28078054/6142097

.dropdown-menu-center {  left: 50% !important;  right: auto !important;  text-align: center !important;  transform: translate(-50%, 0) !important;}
<head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head>
<div class="container">  <h2>Dropdowns</h2>  <div class="dropdown text-center">    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example    <span class="caret"></span></button>    <ul class="dropdown-menu dropdown-menu-center">      <li><a href="#">HTML</a></li>      <li><a href="#">CSS</a></li>      <li><a href="#">JavaScript</a></li>      <li class="divider"></li>      <li><a href="#">About Us</a></li>    </ul>  </div></div>

Centering a css dropdown menu

Since you are using float, the only way to center it is to apply a width to the containing element and use margin-left: auto; margin-right: auto. There is no way to do this will retaining the flexible width.

An alternative to float would be display:inline-block; These can be centered using text-align:center, but you'll have to rework the css.

Align css drop down menu to the center

include this below css media query in your existing css which will solve issue it is only for mobile view.

@media only screen and (max-width: 768px) {
        .dropdown-menu > li > a {
            text-align : center;
        }
      .dropdown-menu{
        width : 100%;
      }
    }

How to align the dropdown menu with the button

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.

See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className += " w3-hide";
    setTimeout(function() {
      x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");

    }, 500)
  }
}
.container {
  display: block;
  margin: 0 0;
  position: absolute;
  top: 10px;
  right: 0px;
}

/*Items menu*/
.user_menu_item {
  display: flex;
  align-items: center;
}

.user_menu_item:hover {
  background: whitesmoke;
  border-left: 4px solid blue;
  transition: 0.3s;
}

.user_menu_item:not(:hover) {
  transition: 0.3s;
}

.user_menu_item>a {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 10px;
  width: 100%;
  font-size: 14px;
  color: #75777D;
}

.w3-container {
  position: absolute;
  top: 25px;
  right: 0px;
}

.w3-dropdown-click {
  display: flex;
  position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;

  animation: animateFromBottom 0.6s
}

@keyframes animateFromBottom {
  from {
    bottom: -50px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes animateToBottom {
  from {
    bottom: 0;
    opacity: 1
  }

  to {
    bottom: -50px;
    opacity: 0
  }
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.w3-show-block,
.w3-show {
  display: block !important
}

.w3-dropdown-content.w3-hide {
  animation: animateToBottom 0.6s
}

.w3-button {
  display: block;
}
<div class="container">
  <button onclick="myFunction()" class="w3-button">Click Me!</button>

  <div class="w3-container">
    <div class="w3-dropdown-click">

      <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
        <div class="user_menu_item">
          <a href="/account">
            <span class="link_text">Dashboard</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="ordini">
            <span class="link_text">I miei ordini</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="libreria">
            <span class="link_text">Downloads</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="impostazioni">
            <span class="link_text">Impostazioni</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="wp-login.php?action=logout">
            <span class="link_text">Logout</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

How can I center the items in the dropdown menu of bootstrap?

Use this in your css.

.dropdown.dropdown-center {  display: inline-block;  width: 180px;}.dropdown-menu.dropdown-menu-center {  text-align: center;  width: 180px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <div class="row">    <div class="col-ms-12 text-center">      <p>Choose your school</p>      <div class="dropdown dropdown-center">        <button class="btn btn-default dropdown-toggle" type="  button" id="dropdownMenu1" data-toggle="dropdown" aria- haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span>
        </button>        <ul class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenu1">          <li><a href="#">Action</a>
          </li>          <li><a href="#">Another action</a>
          </li>          <li><a href="#">Something else here</a>
          </li>          <li><a href="#">Separated link</a>
          </li>        </ul>      </div>    </div>    <!-- end col-ms-12 -->  </div>  <!-- end row --></div><!-- end container -->

how can I center a dropdown menu?

@amauryHanser gave me the answer
I added this

.dropdown { 
  left: -50%; }

it has fixed it and moves it left a bit, I can ajust the numbers until it works


Related Topics

Want to Override Child Element CSS Property by Parent Element

Transparent Bootstrap Panel

Toggle Class with CSS Not Jquery

Change Background Color of Selectinput in R Shiny

Css: Move a "Float:Right" Element to Top (To Align with the First Element of the List)

How to Import CSS File into Google Colab Notebook (Python3)

Parse Less Client Side

CSS Nth-Child Checkered

What Is the Rule Behind "CSS 256 Classes Override One Id"

CSS 3: Text Rotation Bug

What Tag Should I Use Instead of Deprecated Tag Font in HTML (Cannot Use CSS)

Zooming on a Point with CSS3 Transform Scale

CSS Url() Not Recognized in Internet Explorer 10

Unicode Character-Specific CSS - a Thought

Css3 :Not() Selector to Test Parent's Class

How to Autoscale the Font Size to Fit the Contents of a Div

What Is Vanilla CSS and Why

Angular Material 6 Grid List Align-Items and Justify-Content to Flex-Start


Leave a reply



Submit