CODEWITHSUNDEEP
htmlcssresponsive-design
user3187469
user3187469

Reputation: 1531

Centered button over responsive image

JSFIDDLE DEMO

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

So I have this image, which is responsive and button over it which should be always centered.

If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?

Is there a better solution for this besides setting a lot of @media queries here?

Upvotes: 1

Views: 3179

Answers (1)

helion3
helion3

Reputation: 37381

Since you're using absolute positioning you can't currently use margins to achieve this.

However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.

<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

You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.

Upvotes: 1

Related Questions