无法弄清楚如何在桌面上将此按钮和 header 或此图像在移动设备上居中

Question

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; } }

Desktop View - Tablet/Mobile View

Answer 1

Use flexbox and center. You can use grid too but flexbox is easier.

Answer 2

I would suggest using Flexbox since it will make everything easier for you. With Flexbox you can center elements both vertically and horizontally.