简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie zentriere ich ein einem Menü hinzugefügtes Bild mit HTML-CSS?
P粉980815259
P粉980815259 2024-04-01 20:53:26
0
2
269

Ich versuche, ein Menü wie das unten abgebildete zu erstellen:

Das habe ich getan:

Wie zentriere ich Elemente im Menü mit Bildern? Das ist meine Hausaufgabe und obwohl ich mein Bestes gebe, schaffe ich es nicht. Vielen Dank im Voraus für Ihre Hilfe. 

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>

Ich wäre Ihnen sehr dankbar, wenn Sie mir sagen könnten, wie der von Ihnen geschriebene Code funktioniert.

P粉980815259
P粉980815259

Antworte allen(2)
P粉215292716
P粉2152927162024-04-02 12:56:13 2 Etage

我会这样做，将 display flex 给所有导航菜单项的包装，在本例中为 ul。然后使用 align-content: center 将列表项垂直居中。

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

希望这对您有帮助。如果不让我知道，我会进一步调查。

Wie +0
Antwort hinzufügen
P粉198814372
P粉1988143722024-04-02 12:15:07 1 Etage

您必须添加 display:flex;，如下所示：

.navbar ul{display:flex;}
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！