Centering 'nav a' text

1

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
311680×132 4.68 KB

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:

Home Speakers Schedule Venue Register

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

2

Try this:

nav a {
  padding: 10px 20px;
}

Hope it helps :stuck_out_tongue:

3

That created the following result =/

04
041680×143 6.84 KB

4

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!

5

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
541680×127 4.37 KB

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