Кнопка не перемещается в центр изображения при изменении размера браузера

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>