Cannot get selectors right for CSS to set rule to achieve desired result

Here are some code fragments. I have a banner and I am changing its' size depending on whether it is the home page or other pages.
HTML:

<div id="page1">
<header class=large_banner> <a class="logo" title="Swordsmen Martial Arts" href=""><span>Swordsmen Martial Arts</span></a>
<div id="myBanner" class="hero">
<h1>We know Martial Arts</h1>
<a class="btn" title="Get training from Masters" href="http://hdkumdo.com/smen/about">Get training<span> from leading Masters</span></a>
</div> ...


CSS

header div.hero
position: absolute;
width: 42%;
top: 99px;
left: 55%

header div.hero h1
line-height: 1em;
margin: 0 0 30px 0;
color: #fff;


.large_banner
height: 300px; /* default height for Home page is 200px*/
;


The banner size component works fine and I get the correct size according to the page. My problem is that I also want to change the top property of the div hero so that it is more centrally aligned (between top and bottom) within the overall banner.
I have tried different combinations of class hero, large_banner and id myBanner with no success.

1 Answer
1

You can use display:flex. Put the .hero in a container and give container css like in example: where 100vh is window height and 34px is Logo height

display:flex

.hero

100vh

34px

#myBanner
height: calc(100vh - 34px);
display: flex;
align-items: center;


.hero
margin-top: -34px;


<div id="page1">
<header class=large_banner>
<a class="logo" title="Swordsmen Martial Arts" href="">
<span>Swordsmen Martial Arts</span>
</a>
<div id="myBanner">
<div class="hero">
<h1>We know Martial Arts</h1>
<a class="btn" title="Get training from Masters" href="http://hdkumdo.com/smen/about">Get training<span> from leading Masters</span></a>
</div>
</div>
</header>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.