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

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

但是，如果您使用包裹锚点的新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 个答案: