# Centering 'nav a' text

**URL:** <https://forum.freecodecamp.org/t/centering-nav-a-text/171939>\
**Category:** General\
**Created:** [January 31, 2018, 10:40am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939 "2018-01-31T10:40:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mattw](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@Mattw](https://forum.freecodecamp.org/u/Mattw)\
**Post date:** [January 31, 2018, 10:40am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/1 "2018-01-31T10:40:07Z")

</div>

Hi all,

I’m trying to figure out how to get the a href’s to be central (horizontal as well as VERTICAL), in a nav box. (The reason I’m trying to do this is so that I can have a banner that is the only the height of my nav rather than the entire footer or any other elements).

I’ve attached a picture to show what I mean:

 ![31](https://global.discourse-cdn.com/freecodecamp/original/3X/3/e/3e6831024c9fdab2467ccbc8cabca06f85eac294.png)

I can center the text horizontally but can’t get it to move vertically into the center of the nav box. I currently have the following code:

nav {  
background: lightblue;  
height: 120px;  
text-align: center;  
}

and I have tried putting margin-top into the nav a:

nav a {  
margin-top: 10px;  
}

But this has no effect on the text.

I then tried putting the nav a text into a div:

HomeSpeakersScheduleVenueRegister

and then use the css:  
nav div {  
margin-top: 45px;  
}  
and this worked better, but this doesn’t get it perfectly center.

Any thoughts or suggestions would be MUCH appreciated! =)

Many Thanks,  
Matt

---

<div class="post-metadata">

**Author:** ![NicolasBG87](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nicolasbg87/32/69901_2.png) [@NicolasBG87](https://forum.freecodecamp.org/u/NicolasBG87)\
**Post date:** [January 31, 2018, 10:46am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/2 "2018-01-31T10:46:08Z")

</div>

Try this:

```auto
nav a {
  padding: 10px 20px;
}

```

Hope it helps 😛

---

<div class="post-metadata">

**Author:** ![Mattw](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@Mattw](https://forum.freecodecamp.org/u/Mattw)\
**Post date:** [January 31, 2018, 10:49am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/3 "2018-01-31T10:49:55Z")

</div>

That created the following result =/

 ![04](https://global.discourse-cdn.com/freecodecamp/original/3X/8/0/801749662a05373ef7b25e779cbaa850e8bce5c0.png)

---

<div class="post-metadata">

**Author:** ![Mattw](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@Mattw](https://forum.freecodecamp.org/u/Mattw)\
**Post date:** [January 31, 2018, 10:51am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/4 "2018-01-31T10:51:00Z")

</div>

I am wondering whether the only way to do this is to indeed put the anchor elements into another box. I had forgotten/not realised that you can’t change the margin on inline elements, which indeed anchors are!

---

<div class="post-metadata">

**Author:** ![Mattw](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@Mattw](https://forum.freecodecamp.org/u/Mattw)\
**Post date:** [January 31, 2018, 10:56am UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/5 "2018-01-31T10:56:17Z")

</div>

Just discovered also that following that logic I can set the anchor to a “display inline-block” element thus reducing the need for an extra box:

nav a {  
display: inline-block;  
margin-top: 45px;  
}  
produces:

 ![54](https://global.discourse-cdn.com/freecodecamp/original/3X/4/a/4aa29cb9c6c2d29610f5468c53b9e35a2695588d.png)

Still can’t work out how to get dead center though- this is still using an estimation of what looks about right.

---

<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:28pm UTC](https://forum.freecodecamp.org/t/centering-nav-a-text/171939/6 "2021-01-17T20:28:17Z")

</div>

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