centrer un texte dans son background

Bonjour à tous voici mon problème, j'ai crée un menu pour mon site, j'y est mis des séparateur en créant une bordure, mais le problème est que le texte ne se centre pas dessus.... quelqu'un aurais une idée ?

Voici mon code html :

<!doctype html>
    <html lang="fr">
        <head>
            <meta charset="utf-8">
            <title>NI | Home</title>
            <link rel="stylesheet" href="STYLE/style.css">
            <link rel="icon" href="PAGES/INDEX/IMAGES/LOGO.png" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet"> 
            <script src="script.js"></script>
        </head>
        <body>
            <heder>
                <div id="bandeau">
                    <img src="PAGES/INDEX/IMAGES/LOGO INVERT.png" alt="LOGO INV">
                </div>
                <nav>
                    <div>
                      <ul id="menu">
                        <li><a href="index.html">HOME</a></li>
                        <li class="border"></li>
                        <li><a href="projets.html">PROJETS</a></li>
                        <li class="border"></li>
                        <li><a href="partage.html">PARTAGE</a></li>
                        <li class="border"></li>
                        <li><a href="veille.html">VEILLE</a></li>
                        <li class="border"></li>
                        <li><a href="contact.html">CONTACT</a></li>
                        <li class="border"></li>
                        <li><a href="adg.html">ADG</a></li>
                        <li class="border"></li>
                        <li><a href="shop.html">SHOP</a></li>
                        <li class="border"></li>
                        <li><a href="board.html">BOARD</a></li>
                      </ul>  
                    </div>
                </nav>
            </heder>


        </body>
    </html>

et voici le CSS :

/* header */

body {
    margin: 0px;
    padding: 0px;
}
#bandeau {
    background-color: #1C5C69;
    width: auto;
    height: 150px;
    padding: 15px;
    text-align: center;
}
#bandeau img {
    height: 150px;
    width: 150px;
}

/* Menu */

#menu {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    background: black;
    text-align: center;
}
#menu a {
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.border {
    border-right: 1px solid white;
    height: 40px; 
    display: inline-block;
}

NicolasIGUINIZ2

22 juin 2021 à 11:10:34

maxcharbonnelle

22 juin 2021 à 11:53:16

Hello !

Pour aligner ton texte verticalement, j'aurais ajouté

align-items: center;

dans la class #menu

Perso, je serais parti plutôt sur un border-right ou border-left sur le <li> avec un width 100% pour éviter d'ajouter des <li> qui sont simplement des bordures

J'espère que j'ai pu t'aider !

-
Edité par maxcharbonnelle 22 juin 2021 à 11:53:55

menu site

centrer un texte dans son background

Supprimer

Modérer

Signaler le message aux modérateurs