azam azam - 4 months ago 27
HTML Question

position dropdown button and dropdown menu in center?

<div class="dropup center-block">
<button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropup stuff</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>


added
center-block
to both div and button, but unable to get the dropup menu positioned center.

A similar thing can be found at "Dropdown Position" in this page. The button is aligned left, but the menu is right. I'm able to align the menu right but not center.

Please help!

Answer

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

source: http://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>