Trying to make my h1 and h2 vertically centered with ZURB Foundation navbar

Question

I have tried so many different ways to make h1 and h2 center aligned. I have managed to make them centered horizontally, not sure why it won't work for vertical alignment. They also move when navbar shows. I really don't know how to fix it. I tried "display: table-cell; vertical-align: middle;" when i searched some other answers, still did not work.

.bg-title{
  color: white;
  font-family: 'Bungee Inline', cursive;
  font-size: 100pt;
  text-align:center;
  vertical-align:middle;  
}

.secd-title{
  color: white;
  font-family: 'Candal', sans-serif;
  text-align:right;
  margin-right: 2.5em;
}

.bg-title-wrap{
  display: flex;
  flex-direction: column;
  position: relative;
  justify-items: center;
  align-items: center;
}

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
<body>
  <!-- <div class="backGround"></div>-->
  <header class="header">
    <nav id = "main-menu">
      <div class="title-bar-right nav-wrap" data-responsive-toggle="main-nav" data-hide-for="large-dropdown">
        
        <div class="title-bar-title nav-title">Menu</div>
        <button class="menu-icon" type="button" data-toggle="main-nav"></button>
      </div>
      
      <div class="top-bar" id="main-nav" data-animate="hinge-in-from-top spin-out">
        <div class="top-bar-right">
          <ul class="vertical large-vertical menu" data-responsive-menu="drilldown large-dropdown">
            <li class="home"><a href="#">HOME</a></li>
            <li><a href="#">BUY CANNABIS</a></li>
            <li><a href="#">STORES</a></li> 
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">SUBSCRIBE</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <div class="bg-title-wrap">
    <h1 class="bg-title">store name</h1>
    <h2 class="secd-title">CANNABIS CO.</h2>
    </div>
  </main>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

First set `color: black;` then it will appear on white screen. — Sunderam Dubey, Apr 19 '22 at 10:42

score 1 · Accepted Answer · answered Apr 19 '22 at 10:50

1

You need to set the height of the parent div and apply justify-content: center instead of justify-items.

Also, it is good to reset margins to zero 0 to remove unwanted inherited browser styles.

.bg-title{
  color: black;
  font-family: 'Bungee Inline', cursive;
  font-size: 100pt;
  text-align:center;
  margin: 0;
}

.secd-title{
  color: black;
  font-family: 'Candal', sans-serif;
  margin: 0;
}

.bg-title-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 350px;
}

<main>
  <div class="bg-title-wrap">
    <h1 class="bg-title">store name</h1>
    <h2 class="secd-title">CANNABIS CO.</h2>
  </div>
</main>

answered Apr 19 '22 at 10:50

fmsthird

1,745
2
17
34

hi! your way worked! but now i still have the issue is everytime when my nav bar dropdown shows, the h1 and h2 would move to the bottom. when nav bar dropdown hides, they would be the place as i set. how do it prevent that? – lightlailai Apr 19 '22 at 11:00
That is another issue, you need to set your menu wrapper to position fixed or static so that it won't affect the h1 and h2 wrapper. – fmsthird Apr 19 '22 at 12:35

Trying to make my h1 and h2 vertically centered with ZURB Foundation navbar

1 Answers1