I'm looking to center the heading text vertically within the div, but currently it is being pushed down with margin-top which is causing issues when the titles spill over onto a second line.
For reference, please check out the example here:
HTML
<div id="page-featured" style="background: url(<?php echo $src[0]; ?> ) !important; overflow: hidden; background-size: cover !important; background-position: center !important;"></div>
<div id="page-overlay">
<div id="page-titles">
<h1><?php the_title(); ?></h1>
</div>
</div>
CSS
#page-overlay, #page-featured {
height: 400px;
width: 100%;
}
#page-overlay {
position: absolute;
top: 95px;
background-color: rgba(0,0,0,0.1);
z-index: 100;
color: #FFF;
}
#page-titles {
width: 100%;
height: 100%;
text-align: center;
}
#page-titles h1,
#page-titles p {
margin: 0px;
position: absolute;
top: 40%;
left: 0;
right: 0;
}
Appreciate your help!