在响应图像

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