简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment centrer une image ajoutée à un menu en utilisant HTML CSS ?
P粉980815259
P粉980815259 2024-04-01 20:53:26
0
2
267

J'essaie de créer un menu comme celui illustré ci-dessous :

Voici ce que j'ai fait :

Comment centrer les éléments du menu avec des images ? C'est mon devoir et même si je fais de mon mieux, je n'y arrive pas. Merci d'avance pour votre aide. 

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>

Je vous serais très reconnaissant si vous pouviez me dire comment fonctionne le code que vous avez écrit.

P粉980815259
P粉980815259

répondre à tous(2)
P粉215292716
P粉2152927162024-04-02 12:56:13 2 plancher

Ce que je ferais, c'est display flex 给所有导航菜单项的包装，在本例中为 ul。然后使用 align-content: center centrer l'élément de la liste verticalement. 

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

J'espère que cela vous aidera. Si vous ne me le faites pas savoir, j'enquêterai plus en profondeur.

Comme +0
Ajouter une réponse
P粉198814372
P粉1988143722024-04-02 12:15:07 1 plancher

Vous devez ajouter display:flex; comme indiqué ci-dessous : 

.navbar ul{display:flex;}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！