0

I want to create a navbar using the CSS grid attribute. Currently I have this

#navbar {
  height: 60px;
  display: grid;
  justify-items: right;
  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>

and my problem is that I don't know how to center the links vertically within the navbarLinkContainer.

I tried to add align-items: center and vertical-align: middle to the navbarLinkContainer but this didn't help. So how can I center the links within the navbar?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Question3r
  • 2,166
  • 19
  • 100
  • 200

3 Answers3

1

Why not use align-items: center on the #navbar instead; since it is a flex-container it will align its children at the middle; also changed your justify-items: right to justify-content: end

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

#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>
IvanS95
  • 5,364
  • 4
  • 24
  • 62
1

You could simply add align-items: center to your #navbar:

#navbar {
  height: 60px;
  display: grid;
  justify-items: right;
  align-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>
Orlandster
  • 4,706
  • 2
  • 30
  • 45
-2

If you want all the links to be in the center, you could modify "justify-items: center;" in the 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>
Sibetron
  • 25
  • 2