Trying to evenly space out an image nav link with the rest of the text links in navigation

Issue

I'm trying to make my first website after reading an html/css book. I'm having difficulty evenly spacing out my navigation.

The image is vertically centered, however the text gets thrown off. Just need help in how to correct this.

html:

<nav>
<ul>
    <li><a style="padding: 0;" href="html.html">
        <img src="Images/Intak Mark-01.png" />
        </a>
    </li>
    <li><a href="html.html">Printing</a></li>
    <li><a href="html.html">Graphic Design</a></li>
    <li><a href="html.html">Chinese Calendars</a></li>
    <li><a href="html.html">FAQS</a></li>
    <li><a href="html.html">Contact Us</a></li>
</ul>

css:

    nav {
    position: fixed; left: 0px; top: 0px; 
    margin: 0; 
    background-color: black; 
    align-content: center; 
    font-size: 20px; 
    float: left; 
    border-radius: 0px;
    border: none;
    width: 100%;
    overflow: hidden;
}

ul {list-style-type: none;
    margin: 0;
}

li {display: block;
float: left;
padding: 15px 32px;
}

a {text-decoration: none; color: white;}
}

If there this is really bad markup, please let me know how I can fix it. I'm still learning.

Also had a separate question. The body I just repeated the word "text" to show how the scrolling would look. I tried using position: sticky, as I found a solution on line for having the text start at the bottom of the nav instead of underneath. However, when I do this, the nav no longer expands the entire width of the viewport.

Solution

.nav {
    background: tomato;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

.item {
    background: rgba(0, 0, 0, 0.2);
}

.item:first-child {
    height: 50px;
    line-height: 50px;
}

<ul class="nav">
    <li class="item">navA</li>
    <li class="item">navB</li>
    <li class="item">my third item</li>
    <li class="item">Blah</li>
    <li class="item">Contact</li>
</ul>

Flexbox layouts ar the way to go now.

Example for your case:

nav > ul {
    background: tomato;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

Alternative

If you look closely at the CSS in the code snippet, you can see I used another trick to vertically center text inside a div, is to use line-height. For example, if you know your image is gonna be 50px height and your nav link will not take two lines, you can put line-height: 50px

Answered By - TOPKAT