0
votes

Aligner verticalement les éléments de navigation alignés à droite dans la grille

Je souhaite créer une barre NAV à l'aide de l'attribut CSS GRID CODE>. Actuellement, j'ai ce

p>



<div id="navbar">
  <div id="navbarLinkContainer">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

html css css-grid

0 commentaires

3 Réponses :

1
votes

Pourquoi ne pas utiliser align-items: centre code> sur le #navbar code> à la place; Comme il s'agit d'un conteneur flexible, il alignera ses enfants au milieu; Également modifié votre justify-items: droite code> à Justify-Content: fin code>

p>



<div id="navbar">
  <div id="navbarLinkContainer">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

0 commentaires

1
votes

Vous pouvez simplement ajouter align-items: Centre code> à votre #navbar code>:

p>



<div id="navbar">
  <div id="navbarLinkContainer">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

0 commentaires

-2
votes

Si vous voulez que tous les liens soient au centre, vous pouvez modifier "Justify-Articles: Centre;" Dans la barre NAVBAR

#navbar {
  height: 60px;
  display: grid;
  justify-items: center;
  padding: 20px;
  background: red;
}

#navbarLinkContainer {}

a {
  text-decoration: none;
  margin: 0 10px;
  color: white;
  background: black;
}


<div id="navbar">
  <div id="navbarLinkContainer">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

0 commentaires