css - CSS按钮未正确对齐图像

Question

我正在使用具有以下概念的响应式设计（引导程序）：

大响应图像，两个按钮浮动在图像底部的图像上，按钮随着窗口大小的变化相对于图像大小进行调整。

<div>
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>        
</div> 
</div> 

.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}

#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}

#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}

但是，这些按钮将自身定位在图像高度下方，并进入低于图像的内容。

我尝试了 display: table-cell, vertical-align:bottom 的按钮，但没有奏效。

谢谢。

Answer 1

您需要将父级设置为相对定位。
请参阅重新访问的代码中的注释:)。

<div class="bt_img">
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>        
</div> 
</div> 

.bt-img {
position:relative;/* childs in absolute will refer to area where .bt-img is displayed */
}
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}

#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}

#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
img {
vertical-align:top; /* or bottom: = removes it from baseline and shows no gaps under */
}