html - Div 中的居中按钮，位于其他居中文本下方

Question

我正在创建一个外观相对简单的网站。有一堆 div，每个 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>