Question

我正在设计一个首先应该选择城市的页面。现在我可以获取按钮和下拉项目，但它仍然保持在页面顶部。我希望能够将其移动到中心或可能移动到页面的左中间。这是我的代码：

<!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');
  }
}
}
}

我是新手。

Answer 1

我不确定，但也许你想要它：改变这个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>

Answer 2

通过在按钮周围添加width: 100%;的容器，您可以使用text-align: center;水平居中按钮（如果您希望它在左侧水平对齐，则可以删除）并使用{{1} } position: absolute;垂直居中;

请注意，我还在容器上添加了top: 50%;，它代表按钮高度的一半，用于调整基于按钮顶部而非中间对齐按钮的margin-top: -38px;。

您可以查看此帖子，了解更多水平和垂直对齐方式：https://stackoverflow.com/a/19461564/5583283

top: 50%;

/* 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;
}

如何随着下拉移动此按钮

2 个答案: