html - 响应图像上的居中按钮

Question

JSFIDDLE DEMO

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

所以我有这张图片，它是响应式的，上面的按钮应该始终居中。

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

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

Answer 1

由于您使用的是绝对定位，因此目前无法使用边距来实现这一点。

但是，如果您使用包裹 anchor 的新 div，将其设置为 position: absolute，然后将 anchor 居中放置在其中，它就会起作用。

<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 来控制太小的尺寸。