时间戳

首页 > 解决方案 > 如何使两个居中

没有它们重叠？

html - 如何使两个居中
没有它们重叠？

问题描述

我试图以按钮的形式居中两个 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>

提前致谢！

标签： htmlcss

解决方案

希望这可以帮助。我使用margin-right:autoandmargin-left:auto让 btn1 水平居中对齐

.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>

推荐阅读