How do I vertically center li navigation menu but horizontally align it to the right while keeping logo icon horizontally aligned left and ctrd vert?

davos 0
Viewed 35

Intended outcome Above are the desired results - but with nav bar moved to right of page.

Here is the existing css and html. Again the goal is

  1. To get the logo image vertically centered and horizontally to the left of the page
  2. Get the nav bar to the far right of the page and vertically centered
  3. have the HR just below the image and the nav bar

Thank you in advance!

<div class="nav"> 
  <ul>
    <li><img src="Images/logo.jpg"></li>
    <li><a class="link" href="#">Contact</a></li>
    <li><a class="link" href="#">Qual...</a></li>
    <li><a class="link" href="#">Home</a></li>
  </ul>
  <hr class="hr">     
</div>

 .nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;    
}
css html
2 Answers

you want to align vertical li child so use display flex and give first element li flex-grow to take white space in midle you can use grid, for more info about grid here

.nav li {
 margin:0 10px;
 }
.nav>ul{
  list-style: none;
  display:flex;
  align-items:center;
  padding:0;
}
.nav li:first-child{
  flex-grow:1;
}
<div class="nav"> 
  <ul>
    <li><img src="https://picsum.photos/200"></li>
    <li><a class="link" href="#">Contact </a></li>
    <li><a class="link" href="#">Qual... </a></li>
    <li><a class="link" href="#">Home</a></li>
  </ul>
  <hr class="hr">     
</div>

userE64W0 

.nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .nav ul li {
            float: right;
            line-height: 100px;
            padding: 0 20px;
        }
        .nav ul li:first-child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .nav ul:after {
            content:"";
            display: block;
            clear: both
        }
<div class="nav"> 
  <ul>
    <li>LOGO</li>
    <li><a class="link" href="#">Contact</a></li>
    <li><a class="link" href="#">Qual...</a></li>
    <li><a class="link" href="#">Home</a></li>
  </ul>
  <hr class="hr">     
</div>

Azu0
Related