Text alignment on the navigation bar

1

Hello, friends. I am a very beginner and need your help.

I’d like to change three menus on top of navbar.

I am a bit confused as to how I can center the text on the navigation bar. I have tried vertically center-aligned but it still continues to stick to the top. Thank you very much for your help.

2

Vertical alignment is a bone of contention for many people working with HTML/CSS.
I’m off to bed so I don’t have the energy for a detailed reply. In short there are a few methods you can use but try the following; it works for me.

Put your <a> tags inside a <nav> tag in your HTML.
In CSS make separate selectors for nav and a.
Your nav height will determine your a height.
play around with the padding of a until you get the vertical position you want.
The sum of height + padding of a should be equal to height of nav.

For example:

nav {
  background-color: RGB(80, 80, 95);
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
}

nav a {
  float: left;
  width: 200px;
  padding-top: 10px;
  height: 40px;
  text-align: center;
  font-size: 1.1em;
  color: white;
  text-decoration: none;
}
3

Thank you so much.

I’ve tried it but couldn’t have got it.

Can you check my codes again?

Actually, I don’t understand the purpose of tag inside a tag.

4

I’ll try to get back to you later tonight. Chill Sunday away from the computer…