I have created a transparent "button" and positioned it on a full-width background image using the class within an <a> tag. I want the button to be centered responsively on the image, achieving horizontal centering but not quite vertical alignment (my goal is to create a single page layout). Here is the HTML:
<div class="container">
<div class="nav">navigation area</div>
<div class="bg-image">
<a class="button-transp abs" href="#">Button text<br>second line<br>third</a>
<img src="bg_top.jpg">
<h1>This text is centered.</h1>
</div>
<div class="main">main content area</div>
</div>
The CSS code:
.abs {
position: absolute;
z-index: 2;
margin: 25% auto 0;
left: 0;
right: 0;
}
.button-transp {
display: inline-block;
min-width: 170px;
max-width: 500px;
width: 30%;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
}
To achieve some vertical alignment, I utilized margin: 25% auto 0;