How Do I Move This Button Along With The Drop Down

Question

I am designing a page where a city should be selected first. Now I am able to get the button and the drop down item in it but it stays on to the top of the page. I want to be able to move it to the center or probably to the left-middle of the page. Here is my code:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px 40px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
   background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>


<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select City</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Mumbai</a>

</div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

I am a novice on this.

score 0 · Answer 1 · answered Jul 16 '16 at 15:41

I am not sure but maybe you want it : Change this css :-

.dropdown {
  position: relative;
    display: block;
    text-align: center;
}
.dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    max-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: auto;
}

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px 40px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
   background-color: #3e8e41;
}

.dropdown {
  position: relative;
    display: block;
    text-align: center;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    max-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: auto;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select City</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Mumbai</a>

</div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 11:44

By adding a container with width: 100%; around the button you can use text-align: center; to center the button horizontally (which can be removed if you want it align horizontally on the left) and use position: absolute; with top: 50%; to center vertically;

Note that I also added margin-top: -38px; on the container which represent half the height of the button to tweek the top: 50%; that align the button based on the top of the button instead of the middle.

You can take a look at this post for more ways to align horizontally and vertically : https://stackoverflow.com/a/19461564/5583283

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.container {
  position: absolute;
  margin-top: -38px; /* this represent half the height of the button */
  top: 50%;
  text-align: center; /* remove this to align on the left */
  width: 100%;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 40px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.show {
  display: block;
}

<div class="container">
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Select City</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#home">Mumbai</a>
    </div>
  </div>
</div>

How Do I Move This Button Along With The Drop Down

2 Answers2