Centered кнопку над отзывчивым изображением

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 контролировать слишком малые размеры.