Question

我正在使用响应式设计（bootstrap），并考虑以下概念：

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

<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;
}

然而，按钮将自己进一步向下定位超过图像高度，并进入低于图像的内容。

我试过显示：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 */
}

CSS按钮没有正确对齐图像

1 个答案: