Como hace un banner con contenido centrado verticalmente

banner

Hola, usualmente tengo la necesidad de elaborar banners que contienen poco texto junto a una imagen. Al principio, me resultaba algo complicado centrar el texto de manera sencilla. Para poder solucionar esto, tenia que visitar varios sitios web en busca de una manera de obtener el resultado que deseaba.

Una vez que pude solucionar mi problema, logre crear un estilo lo suficientemente sencillo, el cual me permitiria poder utilizarlo en cualquier contenedor.

Debido a que paso el dia basicamente elaborando contenido HTML en mi trabajo; estuve en la necesitaba de mantener el codigo en algun lugar. De esta manera, puedo utilizar el codigo cada vez que lo necesitara. Al mismo tiempo, puede servir como ejemplo para otros con la misma duda. Asi que sin mas aqui se los dejo.

Bosquejo del contenido

Lo primero que debemos elaborar es el contenido que deseamos presentar. En mi caso voy a usar una imagen de una camara de action, acompañada de un texto como llamado de accion(CTA), ademas de una boton. La imagen se va a encontrar a la izquierda y el texto a la derecha, esto en escritorio; cuando el banner sea presentado en telefonos o tabletas, la imagen cubrira todo el acho de la pagina, y el texto estara posicionado debajo de la imagen.

bosquejo de banner
Bosquejo del banner (lo siento si no se dibujar :-p )

Creando el contenido HTML

Ya que tenemos el bosquejo, comenzaremos con el codigo HTML. Sin mas, aqui se los dejo:

<div class="cam-banner">
  <div class="img-top">
    <img src="/images/gopro-cam.png" alt="" width="100%" />
  </div>
   <div class="cam-text">
    <div>
      <h1><b>Titulo Principal</b></h1>
      <p>Texto importante o frase para llamar la atencion.</p>
      <a href="#">
        <label class="btn-atencion">Comprar Ahora</label>
      </a>
    </div>
  </div>
</div>

Dandole estilo al banner

Ahora le daremos estilo al banner. Igual, sin mas, aqui esta el codigo:

<style>
  .cam-banner{display: block; width: 100%; margin: 30px 0;}
  .cam-banner .cam-text>div{text-align: center; padding: 30px 20px;}
  .cam-banner .img-top{display: block;}
  .cam-banner .cam-text a{text-decoration: none;}
  .cam-banner .cam-text a:hover .btn-atencion{background-color: #204180; cursor: pointer;}
  .cam-banner .btn-atencion{background: #ce2032; height:44px; color: white; text-align: center; border-radius: 3px; font-size: 20px; padding: 10px 20px; transition: all .3s; font-weight: 700;}
  @media screen and (min-width:768px){
    .cam-banner{display: flex;}
    .cam-banner .cam-text{position: relative; width: 33.33%;}
    .cam-banner .cam-text>div{position: absolute; top: 50%; transform: translateY(-50%);  width: 100%;}
    .cam-banner .img-top{width: 76.66%;}
   }
</style>

Y aqui esta el resultado final tanto en escritorio como el pantalla pequeña:

banner

Espero les haya servido de ayuda este texto. Ahora a descansar hasta el proximo post.

Bye.