响应式图像上方居中按钮
提问于 2014-02-07 21:25:29
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }所以我有这个图像，它是响应式的，按钮在它上面，应该总是居中。
如果你移动窗口宽度，你会看到图像的大小变化很大，我想知道设置按钮的最好方法是什么，这样它就会随着图像自动改变大小，从而变得更大/更小？
除了在这里设置很多@media查询之外，还有更好的解决方案吗？
回答 1
Stack Overflow用户
发布于 2014-02-07 21:29:32
因为你使用的是绝对定位，所以你目前不能使用边距来实现这一点。
但是，如果您使用包装锚点的新div，将其设置为position: absolute，然后将锚点放在其中居中，它就可以工作。
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div><a href="#" class="btn">Register</a></div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}您可以根据需要调整大小和垂直居中，并添加一些响应式css或min-width来控制过小的尺寸。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21638024
复制
腾讯云开发者
