Question

我正在尝试做这个模型......

......我来到了需要将这两个按钮放在图像上的位置。我设法放了一个按钮，但第二个按钮不起作用。这是第一个按钮的代码。

#img_container {
  position:relative;
  display:block;
  text-align:center;
}
.button {
  position:absolute;
  bottom:50%;
  right:50%;
  width:200px;
  height:50px;
  margin:0px -100px -15px 0px;
  background-color: rgb(246, 175, 228);
  border: none;
  box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);;
  font-size: 1.3em;
  color: white;
  text-transform: uppercase;
}

<div id="img_container" class=" "text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <img src="img/homepicture.jpg"/>
    <button class="button">lazybop</button><br>
    <button class="button1">see the products</button>
</div>

然后我尝试使用相同的代码，但只是将底部属性的数量减少到40％，但它仍然保留在同一个地方。

.button1 {
  position:absolute;
  bottom:40%;
  right:50%;
  width:200px;
  height:50px;
  background-color: rgb(246, 175, 228);
  border: none;
  box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);;
  font-size: 1.3em;
  color: white;
  text-transform: uppercase;
}

Answer 1

你上课时有错误

class=**" "**text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">

Answer 2

＆＃13;

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <img src="img/homepicture.jpg"/>
    <button class="button">lazybop</button><br>
    <button class="button1">see the products</button>
</div>

＆＃13;

删除单个＆＃34;在课堂上或复制粘贴上面的代码

http://quandaflow.com/category/website/css/

Answer 3

这是一种方法：

将<img>替换为容器上的背景图像，并使用100vh设备的高度定义此容器的高度。

<div id="img_container" class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div id="button-container">
           <button class="button button1">lazybop</button>
           <button class="button button2">see the products</button>
    </div>

</div>

#img_container {
  background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  height:100vh;
  position:relative;

  /* Flexbox part, to align the button vertically : */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#button-container{
  position:relative;
}
.button {
    position:absolute;
    left:50%;
    width:200px;
    height:50px;
    background-color: rgb(246, 175, 228);
    border: none;
    box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);;
    font-size: 1.3em;
    color: white;
    text-transform: uppercase;
}
.button1{
  margin-left:-100px;
  z-index:10;
}

.button2{
  top:50px;
}

这是一个JsFiddle：DEMO

注意：为了使按钮垂直居中，我使用了flexbox。但是如果你不想使用flexbox，你可以用transform替换它：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

在div bootstrap上居中2个按钮

3 个答案: