0

I am making a navigation and I added top and bottom padding to my li elements because I'm changing their background color to black if they're selected. However, if I add top and bottom padding to my logo (h1 element) it will not be vertically centered in the nav. How can I vertically center my logo?

Here is the codepen link: https://codepen.io/tonyutoko/pen/NWKreyQ

I also posted the code below.

* {
    margin: 0;
    padding: 0;
}


a { text-decoration: none; }


.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


.container {
    max-width: 58.75rem;
    margin: 0 auto;
}


nav { 
  background-color: blue; 
}


.left-group {
  float: left; 
}


nav ul li {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.75em;
}


nav ul li:last-child {
    margin-right: 0;
}


nav ul li a, nav h1 a {
    color: #fff;
}


.selected {
    background-color: #111;
}


.right-group {
    float: right;
}
<nav>
  <div class="container clearfix">
    <div class="left-group">
      <ul>
        <li class="selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <div class="right-group">
      <h1><a href="#">Logo</a></h1>
    </div>
  </div>
</nav>
icymist
  • 11
  • 2

3 Answers3

0

<h1> tag has default margin bottom, so you need to set h1{margin-bottom:0}

To center logo you can use flex utilities. Add this CSS to the container .right-group{display:flex;align-items:center}.

I would advise not to use float, but flexbox.

Add this style to main container .container{display:flex;justify-content:space-between}

More on flexbox: LINK

Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
0

You could use flexbox (display: flex) on the nav. justify-content: space-between save you from the floats, you can now remove those wrapping divs. align-items centers all items vertically.

* {
    margin: 0;
    padding: 0;
}


a { text-decoration: none; }


.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


.container {
    max-width: 58.75rem;
    margin: 0 auto;
    display: flex;
    justify-content:space-between;
    align-items:center;
}


nav { 
  background-color: blue; 
}

nav ul li {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.75em;
}


nav ul li:last-child {
    margin-right: 0;
}


nav ul li a, nav h1 a {
    color: #fff;
}


.selected {
    background-color: #111;
}
<nav>
  <div class="container clearfix">
      <ul>
        <li class="selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <h1><a href="#">Logo</a></h1>
  </div>
</nav>
howtopythonpls
  • 770
  • 1
  • 6
  • 18
0

Add these css into right-group, so your right-group css look like this.

.right-group {
float: right;
height: 42px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
Cuong Hoang
  • 558
  • 1
  • 3
  • 14