简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk memusatkan imej yang ditambahkan pada menu menggunakan HTML CSS?
P粉980815259
P粉980815259 2024-04-01 20:53:26
0
2
268

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粉980815259
P粉980815259

membalas semua(2)
P粉215292716
P粉2152927162024-04-02 12:56:13 Tingkat 2

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.

Suka +0
Tambah Balasan
P粉198814372
P粉1988143722024-04-02 12:15:07 Tingkat 1

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

.navbar ul{display:flex;}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！