Html 响应图像上的居中按钮

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

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

---

除了在此处设置大量@media查询，还有更好的解决方案吗？

因为您使用的是绝对定位，所以当前无法使用边距来实现这一点

但是，如果您使用一个新的div来包装锚定，请将其设置为

位置：绝对

，然后将锚定居中放置在该位置内，它就会工作

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

.标志组{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
填充顶部：25%
}
.标志a{
显示：块；
保证金：0自动；
宽度：250px；
}

---

您可以根据需要调整大小和垂直居中，并添加一些响应css或

min width

，以控制过小的大小。

谢谢，但我的问题是如何使按钮与图像一起调整大小，使其自动调整图像大小并变大/变小。好的，此解决方案将有助于调整居中，因为您有固定的居中像素值。您可以使用媒体查询，使用

%

测量。但是，仍然需要

最小宽度

，以便文本不会被践踏

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