HTML CSS How to center image added to menu?-CodePudding

I'm trying to make a menu like this picture:

I did it like this:

How can I center the items in the menu with the picture? This is my homework and I couldn't do it even though I tried. Thanks in advance for your help.

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}

.navbar ul li {
    display: inline;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
}

.navbar ul li img {
    height: 50px;
}

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div >
        <div ></div>
        <div >
            <ul>
                <li>
                    <a href=""><img src="./img/logo.png"> </a>
                </li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

I'd appreciate it if you could tell me what the code you've written works.

CodePudding user response：

I would do it like this, give display flex to the wrapper of all the nav menu items, in this case ul. Then use align-content: center to center the list items vertically.

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}
.navbar ul {
  display: flex;
  align-content: center;
}
.navbar ul li {
    display: inline;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
}

.navbar ul li img {
    height: 50px;
    width: 50px;
    
}

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div >
        <div ></div>
        <div >
            <ul>
                <li>
                    <a href=""><img src="http://uploads.refuzion.nl/stock.jpeg"> </a>
                </li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
                <li><a href="">adssdaads</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

I hope this helped you. If not let me know I will look into it further.

CodePudding user response：

You have to make display:flex;, like this:

.navbar ul{display:flex;}