CSS按钮未正确对齐图像答案

【问题标题】：CSS buttons not aligning over image properlyCSS按钮未正确对齐图像
【发布时间】：2013-06-10 03:18:46
【问题描述】：

我在使用响应式设计（引导程序）时考虑了以下概念：

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

<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 按钮，但没有奏效。

谢谢。

【问题讨论】：

标签： css position alignment

【解决方案1】：

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

<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 */
}

【讨论】：