Tengo este código para un bloque personalizado en mi sitio web, pero estoy atascado tratando de averiguar cómo centrar verticalmente mi botón y encabezado en el bloque.
También tengo un problema de centrado con la imagen en las versiones de tableta y móvil.
Cada vez que he intentado ajustar el escritorio y centrarlo verticalmente, la versión móvil se estropea.
Aquí está el código que he configurado:
.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; } }Vista de escritorio - Vista de tableta/móvil
Utilice flexbox y el centro. También puedes usar grid pero flexbox es más fácil.
¿Cómo puedo centrar verticalmente un elemento div para todos los navegadores que usan CSS? ¿Esto ayuda? Tuve este mismo problema ayer y esto me ayudó, si no busqué verticalmente en el centro HTML, CSS.
Sugeriría usar Flexbox ya que hará que todo sea más fácil para usted. Con Flexbox puedes centrar elementos tanto vertical como horizontalmente.
