centering texts in nav-CodePudding

im practicing my css and ive been trying to vertically center the texts in the navbar. I tried using line-height:100%, but it didnt work. i am using css grid for the layout so the height of the navbar has been set to 1fr. Is there a way i could go about it that i wouldn't need to use positions for this. thank you very much

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 8fr;
  grid-template-areas: "nav nav" "main side";
  grid-gap: .3rem;
  height: 100vh;
}

nav {
  background: black;
  font-family: futura md bt;
  width: 100%;
  position: sticky;
  top: 0;
  grid-area: nav;
  padding: 0 80px;
  box-sizing: border-box;
  margin: 0;
  color: white;
}

.nav-container {
  display: flex;
  height: 100%;
  position: relative;
}

.logo {
  flex-basis: 15%;
  font-size: 1.5rem;
  height: 100%;
  text-align: left;
}

.middle {
  flex-basis: 70%;
  text-align: center;
  height: 100%;
  align-content: center;
}

.apps {
  flex-basis: 15%;
  height: 100%;
  text-align: right;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
}

.nav-item {
  display: inline-block;
  width: 100px;
  height: 100%;
  margin: 0 25px;
  position: relative;
}

.nav-link {
  color: white;
  font-size: 1.13rem;
  text-decoration: none;
  transition: linear .3s;
  display: inline-block;
}

.trigger {
  height: 100%;
}

.nav-link:hover {
  color: red;
}

.dropdown {
  text-align: center;
  display: block;
  width: 100px;
  position: absolute;
  height: auto;
  background: black;
  display: none;
}

.dropdown-item {
  height: 50px;
  line-height: 50px;
}

.nav-item:hover .dropdown {
  display: block;
}

<div >
  <nav>
    <div >
      <div >
        BFC
      </div>
      <!--logo-->
      <div >
        <ul>
          <li ><a  href="#">Menu</a></li>
          <li ><a  href="#">Services</a></li>
          <li ><a  href="#">Offers</a></li>
          <li ><a  href="#">Bookings</a></li>
          <li ><a  href="#">Contact</a>
            <div >
              <ul >
                <li ><a href="#" >Email</a></li>
                <li ><a href="#" >Telephone</a></li>
                <li ><a href="#" >Whatsapp</a></li>
              </ul>
              <!--dropdown-->
            </div>
            <!--dropdown-->
          </li>
        </ul>
      </div>
      <!--middle-->
      <div >
        Apps
      </div>
      <!--apps-->
    </div>
    <!--nav container -->
  </nav>
</div>
<!--container-->

CodePudding user response：

Remove the height from .nav-container

and add this

.nav-container{align-items:center;}

CodePudding user response：

In your .nav-container class replace the css with this

.nav-container {
  display: flex;
  position: relative;
  align-items: center;
}

Here is the working codesandbox to have a look, hope it helps

CodePudding user response：

I don't know the reason behind the main container, but I believe all the problems start from there. So, in my example, I was able to fix your problem simply by taking out your main container and doing some minor tweaks to a few classes.

nav {
      background: black;
      font-family: futura md bt;
      width: 100%;
      height: 60px;
      position: sticky;
      top: 0;
      grid-area: nav;
      padding: 0 80px;
      box-sizing: border-box;
      margin: 0;
      color: white;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .nav-container {
      display: flex;
      width: 70%;
      position: relative;
      justify-content: space-around;
    }

    .logo {
      flex-basis: 15%;
      font-size: 1.5rem;
      height: 100%;
      text-align: left;
    }

    .middle {
      text-align: center;
      height: 100%;
      align-content: center;
    }

    .apps {
      flex-basis: 15%;
      height: 100%;
      text-align: right;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      height: 100%;
    }

    .nav-item {
      display: inline-block;
      width: 100px;
      height: 100%;
      margin: 0 25px;
      position: relative;
    }

    .nav-link {
      color: white;
      font-size: 1.13rem;
      text-decoration: none;
      transition: linear .3s;
      display: inline-block;
    }

    .trigger {
      height: 100%;
    }

    .nav-link:hover {
      color: red;
    }

    .dropdown {
      text-align: center;
      display: block;
      width: 100px;
      position: absolute;
      height: auto;
      background: black;
      display: none;
    }

    .dropdown-item {
      height: 50px;
      line-height: 50px;
    }

    .nav-item:hover .dropdown {
      display: block;
    }
  </style>

<div>
    <nav>
      <div >
        <div >
          BFC
        </div>
        <!--logo-->


        <ul >
          <li ><a  href="#">Menu</a></li>
          <li ><a  href="#">Services</a></li>
          <li ><a  href="#">Offers</a></li>
          <li ><a  href="#">Bookings</a></li>
          <li ><a  href="#">Contact</a>
            <div >
              <ul >
                <li ><a href="#" >Email</a></li>
                <li ><a href="#" >Telephone</a></li>
                <li ><a href="#" >Whatsapp</a></li>
              </ul>
              <!--dropdown-->
            </div>
            <!--dropdown-->
          </li>
        </ul>

        <!--middle-->

        <div >
          Apps
        </div>
        <!--apps-->
      </div>
      <!--nav container -->
    </nav>


  </div>

CodePudding user response：

I've dealt with this back then, but try if padding and margin might work or else read this website it'll be helpful. https://blog.hubspot.com/website/center-div-css#:~:text=You can do this by,the div) vertically and horizontally.