# Text alignment on the navigation bar

**URL:** <https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046>\
**Category:** General\
**Created:** [March 19, 2017, 7:55am UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046 "2017-03-19T07:55:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![customerobsessed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/customerobsessed/32/44521_2.png) [@customerobsessed](https://forum.freecodecamp.org/u/customerobsessed)\
**Post date:** [March 19, 2017, 7:55am UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046/1 "2017-03-19T07:55:14Z")

</div>

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.

> **[Sverige's tribute](https://codepen.io/sverigenewton/pen/NpgGyV)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Soupedenuit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/soupedenuit/32/32478_2.png) [@Soupedenuit](https://forum.freecodecamp.org/u/Soupedenuit)\
**Post date:** [March 19, 2017, 8:07am UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046/2 "2017-03-19T08:07:16Z")

</div>

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:

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![customerobsessed](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/customerobsessed/32/44521_2.png) [@customerobsessed](https://forum.freecodecamp.org/u/customerobsessed)\
**Post date:** [March 19, 2017, 9:30am UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046/3 "2017-03-19T09:30:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Soupedenuit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/soupedenuit/32/32478_2.png) [@Soupedenuit](https://forum.freecodecamp.org/u/Soupedenuit)\
**Post date:** [March 19, 2017, 7:25pm UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046/4 "2017-03-19T19:25:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:50pm UTC](https://forum.freecodecamp.org/t/text-alignment-on-the-navigation-bar/98046/5 "2021-01-17T20:50:07Z")

</div>

Closed on January 17, 2021, 8:50pm UTC