Центрирующие кнопки внутри Div, ниже другого центрированного текста

Question

Я создаю сайт с относительно простым внешним видом.Есть стопка div, каждая из которых заполнена рисунком и содержит несколько текста и кнопок под ним.

Хотя я уверен, что был задан очень похожий вопрос, я чувствую, что пробовал все варианты.В настоящее время я просто установил абсолютную позицию, хотя я пробовал несколько разных макетов и опций.Я довольно новичок в веб-дизайне и не сомневаюсь, что мне просто не хватает одного шага, чтобы заставить работать некоторые другие варианты.Сайт просто должен быть отзывчивым.

#yourShop {
  height: 500px;
  width: auto;
  position: relative;
  text-align: center;
  background-color: black;
  text-align: center;
}

#yourShop img {
  opacity: 0.35;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#buttonsforfood {
  display: block;
  position: absolute;
  top: 75%;
  left: 30%;
}

#foodbtn {
  margin-left: 100px;
}

#buttonsforfood .fbut:hover {
  background-color: #a8652b;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#buttonsforfood .fbut {
  background-color: rgb(56.5, 35.2, 20.5);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

<article id="yourShop">
  <img src="../Edited Shots/Others/compressed/shop.webp">
  <div class="centeredtext">
    <h1 id="first">Your Coffee Shop</h1>
    <p id="motto">Student Owned and Operated</p>
  </div>
  <div id="buttonsforfood">
    <input id="drinkbtn" class="fbut" type="button" value="See our Drinks" onclick="window.location.href = 'Drinks/drinks.html'" />
    <input id="foodbtn" class="fbut" type="button" value="See our Food" onclick="window.location.href = 'Food/food.html'" />
  </div>
</article>

Я прошу прощения за ужасное форматирование связанного кода, а также огромную избыточность.Мне бы очень хотелось, чтобы кнопки располагались по центру под текстом, который у меня есть.

Answer 1

Удаление абсолютного позиционирования из элемента #buttonsforfood приводит к тому, что ваши кнопки отображаются ниже центрированного текста.Я просто удалил следующие свойства:

#buttonsforfood
{
    position: absolute;
    top: 75%;
    left: 30%;
}

Эти свойства перемещали ваш #buttonsforfood от того места, где вы ожидаете, что он находится в DOM (ниже центрированного текста).

Вот результат:

#yourShop
{
  height: 500px;
  width: auto;
    position: relative;
  text-align: center;
    background-color: black;
    text-align: center;
}
#yourShop img
{
    opacity: 0.35;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#buttonsforfood
{
    display: block;
}
#foodbtn
{
    margin-left: 100px;
}
#buttonsforfood .fbut:hover {
  background-color: #a8652b; 
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#buttonsforfood .fbut {
  background-color:rgb(56.5,35.2,20.5);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

<article id="yourShop">
    <img src="../Edited Shots/Others/compressed/shop.webp">
    <div class="centeredtext">
    <h1 id="first">Your Coffee Shop</h1>   
    <p id="motto">Student Owned and Operated</p>
    </div>
    <div id="buttonsforfood">
    <input id="drinkbtn" class="fbut" type="button" value="See our Drinks" 
    onclick="window.location.href = 'Drinks/drinks.html'" />
    <input id="foodbtn" class="fbut" type="button" value="See our Food" 
    onclick="window.location.href = 'Food/food.html'" />
    </div>
</article>