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>