1

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

对于链接代码的可怕格式以及大量冗余，我深表歉意。我只是真的希望按钮在我拥有的文本下方居中。

4

1 回答 1

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>

于 2019-04-08T16:53:15.717 回答