Question

我试图将两个div元素以按钮的形式居中。但是我尝试的一切似乎都没有效果。我得到的最远的结果是使用position: absolute;将其放置在中间，但是当我这样做时，这两个元素会彼此重叠。

我当前正在使用的代码：

/* For the button: */

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
}


/* For the hover effect: */

.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}

<div class="btn1">
    <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
</div><br>
<div class="btn1">
    <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>

谢谢！

Answer 1

如果您需要将a在div内水平居中，则div应该有一个text-align: center。

检查这个小提琴https://jsfiddle.net/03t46hmn

请注意：为div和a使用相同的类可能会引起混乱。尽量避免这种方法。

Answer 2

这对您有帮助吗？

添加/编辑：显示：阻止；底边距：15px;

已移除：位置：绝对；前10名％;底部：10％;左：0；正确：0；保证金：自动;

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: block; /* edited */
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  margin: 0 auto 15px auto; /* new */
}

<div>
  <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
  <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>

Answer 3

也许您应该为每个标签div设置样式。为每个标签div设置不同的左侧。如

<div class="btn1">
  <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
</div>
<br>
<div class="btn1 btn-logout">
  <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>

样式：

.btn-logout{
    left: 40%;
}

Answer 4

尝试一下

HTML

<div class="con">
  <div class="btn1">
    <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
  </div>
  <div class="btn1">
    <a class="btn1" href="logout.php"><b>Logout</b></a>
  </div>
</div>

CSS

.con{
  min-height: 300px;
  display: flex;
  justify-content: space-between; /* here you can also use space-around or center */
  align-items: center; /* this will align then center horizontally */
}
.btn1{
  /* style the button as you like */
}

Answer 5

希望这会有所帮助。我已经使用btn1的margin-right:auto和margin-left:auto使其水平居中对齐

.btns{ margin-top:50%; transform:translateY(-50%) }

使其垂直居中对齐

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;

}
.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}

.btns{
  margin-top:50%;
  transform:translateY(-50%)
  }

<div class="btns">
  <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
  <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>

如何将两个<div>居中而不重叠？

5 个答案: