0

Quisiera que el elemento que tiene el h1 y los párrafos este centrado en el header, ese header tiene un flotante, Por eso para centrar el elemento antes mencionado lo que he intentado fue, darle un height: 100%; al <div class="container></div> que es padre del elemento que tiene los parrafos y el h1, luego pensaba hacerlo flex-container y así centrar.

Pero no funciono el dar height: 100%, supongo que es porque si bien es cierto que el header esta conteniendo al elemento flotante gracias a display: flow-root, al dar un alto en porcentajes a sus hijos ese porcentaje no cuenta con el alto adicional que el elemento flotante puede agregar al elemento header.

Estoy consciente que no siempre la imagen flotante va a hacer que el header sea mas alto, porque la imagen puede ser bastante pequeña para eso.

Otra cosa que intente es position: absolute, luego top: 0, bottom: 0 pero el espacio del div class="container"> no se tiene en cuenta para hacer crecer al header, y debido a eso termina desbordándose en algún punto.

Agradecería cualquier ayuda

Ese layout pienso mantenerlo en pantallas cuyo ancho tiene como mínimo 994px

código

*{
  margin: 0;
}

/*Imagen flotando a la derecha, debido a su contenedor con float: right*/
img{
  width: 100%;
}

.float{
  float: right;
  width: 45vw;
  z-index: 1;
}

.desc{
  padding-top: 12%;
  padding-bottom: 12%;
}

.desc > div{
 width: 50%;
}

.header{
  display: flow-root;
  background-image: url("http://demo.themeies.com/leospa/images/leaf.png");
  background-size: 12%;
  background-position: left center;
  background-repeat: no-repeat;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!--Header con display: flow-root para contener el elemento flotante--!-->
<header class="header">
 
 <!--Imagen flotante a la derecha---!-->
  <div class="float">
    <img src="http://demo.themeies.com/leospa/images/spa.png">
  </div> 
  
   <!--El contenido de este container quiero centrarlo con respecto al header---!-->
  <div class="container">
     
        <div class="desc">
          <div>
            <h1 class="header__headingPage">
                Beauty and success starts here. It's Overwhelming this layout
            </h1>
            <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia saepe omnis consectetur. Perferendis in, dolorem ex rerum quo reprehenderit sit, eveniet ducimus illum distinctio optio cum magni voluptate, enim eum.
          </p>
         </div>
      </div>    
    
  </div>

</header>

1 respuesta 1

0

Cuando utilizas floats se descontrola tu layout.

Pará que el contenedor float no sea más pequeño que su hijo, utiliza overflow: hidden.

Pará centrar el elemento dentro de un box float puedes utilizar foexbox: display: flex; align-items: center; justify-content: center en el padre. O si no, utilizar el position: position: absolute; left, top, right, bottom: 0; margin: auto así centraría el contenido fácilmente.

Espero que sea esta la solución a tu problema, porque la verdad no entendí muy bien.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.