I have this code for a custom block on my website but I'm stuck trying to figure out how to vertically center my button and header in the block.
I also have a centering problem with the image on the tablet and mobile versions.
Anytime I have tried to adjust the desktop and get it vertically centered the mobile version messes up.
Here is the code I have set up:
.custom-html-block {
padding: 20px;
border: 5px solid #388697;
border-radius: 0px;
margin: 30px 0 40px;
overflow: hidden;
}
.btn-buy-links {
float: right;
width: 55%;
overflow: hidden;
}
a.box-title {
display: block;
font-size: 22px;
text-decoration: none;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
a.btn-amazon,
a.btn-chewy {
display: block;
padding: 20px;
background: #5080C9;
text-align: center;
margin: 5px 5px 0;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
border-radius: 40px;
}
@media only screen and (max-width: 800px) {
.btn-buy-links {
float: none;
width: 100%;
}
.custom-html-block img {
text-align: center;
}
}Use flexbox and center. You can use grid too but flexbox is easier.
How can I vertically center a div element for all browsers using CSS? does this help? I had this same issue yesterday and this helped me, if not search up vertically centre HTML, CSS.
I would suggest using Flexbox since it will make everything easier for you. With Flexbox you can center elements both vertically and horizontally.
