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
  • 211,628
  • 17
  • 234
  • 311
Question3r
  • 1,184
  • 10
  • 68
  • 156

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
  • 4,850
  • 4
  • 20
  • 53
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,276
  • 2
  • 26
  • 42
-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