问响应式图像上方居中按钮
EN

Stack Overflow用户

提问于 2014-02-07 21:25:29

回答 1查看 3.1K关注 0票数 1

.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }

所以我有这个图像，它是响应式的，按钮在它上面，应该总是居中。

如果你移动窗口宽度，你会看到图像的大小变化很大，我想知道设置按钮的最好方法是什么，这样它就会随着图像自动改变大小，从而变得更大/更小？

除了在这里设置很多@media查询之外，还有更好的解决方案吗？

html

css

responsive-design

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

Fiddle

您可以根据需要调整大小和垂直居中，并添加一些响应式css或min-width来控制过小的尺寸。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21638024

复制

相似问题

响应式图像上的居中按钮

响应式图像滑块居中图像

响应式居中图像滑块

居中按钮和响应式设计

响应式布局中居中图像

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问响应式图像上方居中按钮
EN