cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk memusatkan imej yang ditambahkan pada menu menggunakan HTML CSS?

Saya cuba buat menu seperti gambar di bawah:

Ini yang saya lakukan:

Bagaimana untuk memusatkan item dalam menu dengan gambar? Ini adalah kerja rumah saya dan walaupun saya cuba yang terbaik, saya tidak dapat melakukannya. Terima kasih terlebih dahulu atas bantuan anda. 

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>

Saya amat berterima kasih jika anda boleh memberitahu saya cara kod yang anda tulis berfungsi.

P粉980815259P粉980815259276 hari yang lalu403

membalas semua(2)saya akan balas

  • P粉215292716

    P粉2152927162024-04-02 12:56:13

    Apa yang saya akan lakukan ialah display flex 给所有导航菜单项的包装，在本例中为 ul。然后使用 align-content: center tengahkan item senarai secara menegak. 

    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;
    
}
    



    
    
    
    Document

    Semoga ini membantu. Jika anda tidak memberitahu saya, saya akan menyiasat lebih lanjut.

    balas
    0
  • P粉198814372

    P粉1988143722024-04-02 12:15:07

    Anda mesti menambah display:flex; seperti yang ditunjukkan di bawah: 

    .navbar ul{display:flex;}

    balas
    0
  • Batalbalas