Question

一段时间以来，我一直在尝试解决此问题。我的导航栏下方有一个图像，并且在该图像的中间放置了一个按钮。问题是，每当我调整浏览器大小时，按钮都停留在同一位置，并且不会随图像一起移动到其中心。请帮忙谢谢！ CSS HTML

Answer 1

您的问题是您使用的是position: absolute;。为此，您需要将以下规则添加到按钮的容器中。

.ScheduleAppointmentWrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  
  /* Don't add the lines 7 & 8 */
  height: 100vh;
  width: 100%;
}

<div class="ScheduleAppointmentWrapper">
  <button id="ScheduleAppointment">SCHEDULE APPOINTMENT</button>
</div>

如果父组件中还有另一个元素，则可以添加以下样式：

.ScheduleAppointmentWrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: relative;
  width: 100%
}

img.button-image {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#ScheduleAppointment {
  z-index: 1;
}

<div class="ScheduleAppointmentWrapper">
  <img class="button-image" src="https://image.ibb.co/djx0P7/11.jpg" alt="Flower">
  <button id="ScheduleAppointment">SCHEDULE APPOINTMENT</button>
</div>

调整浏览器大小时，按钮未移至图像中心

1 个答案: