How to align text center in a responsive css button? - html

Question

I have an image that has two buttons inside it. I want these buttons to be responsive and the text to be centered all the time and resize if the image gets resized. The text inside these buttons is not centered and gets even worse when resizing the browser or when browsing on a mobile device. What am I missing? Below is the CSS code for the image and the buttons:
.container {
position: relative;
width: 100%;
max-width: 2400px;
}
.container img {
width: 150%;
opacity: 0.85;
height: auto;
}
.container .btn {
width: 30%;
height: 10%;
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 70%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 1.5vw;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
.container .btns {
width: 30%;
height: 10%;
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 30%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 2vw;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
<div class="container">
<img img="" src="" alt="">
Registracija Kaune
Registracija Vilniuje
</div>
Below are the images of how it looks:
This is how it looks on desktop:
This is how it looks on mobile/resized browser:

Answer 1

I got rid of your width and height on the buttons and changed your padding to a % so it is responsive and the text will always appear centered when resized.
.container {
position: relative;
width: 100%;
max-width: 2400px;
}
.container img {
width: 150%;
opacity: 0.85;
height: auto;
}
.container .btn {
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 70%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 1.5vw;
padding: 1% 5%;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
.container .btns {
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 30%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 2vw;
padding: 1% 5%;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
<div class="container">
<img img="" src="" alt="">
Registracija Kaune
Registracija Vilniuje
</div>

Answer 2

I modified your code. Try this
.container {
position: relative;
width: 100%;
height:100vh;
}
.btn-container{
display:flex;
justify-content: center;
align-items: center;
height:100%;
width:100%;
}
.container img {
width: 150%;
opacity: 0.85;
height: auto;
}
.container .btn {
opacity: 0.8;
filter: alpha(opacity=80);
background-color: #555;
color: white;
font-size: 1.5em;
padding: 12px 24px;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
line-height: 100%;
margin: 0 30px;
}
I added a div with a classname of btn-container that holds your buttons and positioned in the center
<div class="container">
<img img="" src="" alt="">
<div class="btn-container">
Registracija Kaune
Registracija Vilniuje
</div>
</div>

Answer 3

Try remove height: 10%; from .container .btn Because you added padding for that
.container {
position: relative;
width: 100%;
max-width: 2400px;
}
.container img {
width: 150%;
opacity: 0.85;
height: auto;
}
.container .btn {
width: 30%;
/* height: 10%; */ /* Remove this height */
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 70%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 2vw;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
.container .btns {
width: 30%;
/* height: 10%; */ /* Remove this height */
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
top: 80%;
left: 30%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 2vw;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 100%;
}
<div class="container">
<img img="" src="" alt="">
Registracija Kaune
Registracija Vilniuje
</div>

Answer 4

many solution to this
make the image as background-image for the container, then use flexbox
or
make the image position absolute, add margin to the buttons, and use flaxbox like this esample below
.container {
display: flex;
justify-content: space-evenly;
width: 100%;
max-width: 2400px;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
width: 100%;
opacity: 0.85;
height: auto;
}
.container .btn, .container .btns{
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 10%;
min-height: calc(2vw + 24px);
opacity: .8;
background-color: #555;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
text-decoration: none;
margin: 40% 0;
}
.container .btn {
left: 70%;
font-size: 1.5vw;
}
.container .btns {
left: 30%;
font-size: 2vw;
}
<div class="container">
<img src="https://data.whicdn.com/images/50959200/original.jpg" alt="">
Registracija Vilniuje
Registracija Kaune
</div>

Answer 5

Just Add bootstrap class into button your tag
class="text-center";