1

I am working on a CSS only psd conversion and I need to center the banner text vertically in the middle of the banner image. Any suggestions how to accomplish without using flexbox and grid?

header {
    background-image: url(../assets/main-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* viewport (screen height), the el is now taking 90% of the browser height */
    /* We are doing this since the <header> doesn't have a ton
  of content and we want to be able to see the background image. */
    height: 90vh;
    padding-top: 30px;

}

h1 {
  font-family: 'Iceberg', cursive;
  font-size: 8rem;
  text-align: center;;
  line-height: 80px;
  text-transform: uppercase;
}

header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  text-align: center;
  text-transform: none;
  background-color: rgb(146, 0, 255);

}
<header class="clearfix">
  <div class="wrapper">
  <!-- Navigation STARTS-->
    <nav class="main-menu">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
    <!-- Navigation ENDS-->
    <div class="banner-content">
      <h1>Thunder<br>Force<br> Stadium</h1>
      <h2>presented by hot cops</h2>
    </div>
  </div>
</header>
skarmen
  • 49
  • 9

2 Answers2

2

As I mentioned this only centered it vertically so in order to fix the horizontal position as well I did the following:

header {
    position: relative;
}

.banner-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
skarmen
  • 49
  • 9
1

If you want to center the banner-content vertically, you could try adding the following styling:

header {
    ... // your other syling
    position: relative;
}

.banner-content {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}
Terry
  • 66
  • 2
  • Hi Terry, I added this snippet you suggested but the text is not aligned in the center (horizontally) and perviously it was by using text-align: center. Any suggestions how to fix this as now this property is no longer working. – skarmen Aug 22 '20 at 16:21
  • Ah, I thought you only wanted it vertically centered, my bad. Try adding `left: 50%` and change the transform to `transform: translate(-50%, -50%)` – Terry Aug 22 '20 at 16:22
  • Yes I wanted it both vertically and horizontally - should have clarified. However this was really helpful - I appreciate it! – skarmen Aug 22 '20 at 16:28