HTML CSS How to center image added to menu?

Question

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 class="container">
        <div class="top-space"></div>
        <div class="navbar">
            <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.

Thank you! Please post as an answer so I can mark you as the correct answer. — Emir Bolat, Nov 08 '22 at 15:49
Does this answer your question? [How can I vertically center a div element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css). (Or try one of the many, many other duplicates for this question) — Daniel Beck, Nov 08 '22 at 15:53

score 1 · Answer 1 · answered Nov 08 '22 at 15:50

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 class="container">
        <div class="top-space"></div>
        <div class="navbar">
            <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.

score 1 · Accepted Answer · answered Nov 08 '22 at 15:51

1

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

.navbar ul{display:flex;}

answered Nov 08 '22 at 15:51

Hisham Alfoqaha

239
3
11

HTML CSS How to center image added to menu?

2 Answers2