Question

我正在创建一个外观相对简单的网站。有一堆div，每个div上都装有图片，并在其下方包含一些文本和按钮。

尽管我确定有人问过非常类似的问题，但我感觉好像我已经尝试了每个选项。尽管我尝试了多种不同的布局和选项，但目前我只是将其设置为绝对位置。我是Web设计的新手，我不会怀疑我是否只是缺少使其他选项起作用的一个步骤。该网站只需要响应即可。

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

Div中的居中按钮，在其他居中文本下方

1 个答案: