Centering text in a nav tag.

[jools]

Hello,

 

I've just started writing CSS and am struggling to get some text to align vertically in a nav div. I have tried to use the vertical align command but this only seems to work when I have a larger height value, but when I want to keep the height relatively low, the text seems to fall out the div. To see what I mean, my page with the text (home, what we do,what we do, what we do, what we do....)not quite centred in the header is here (please ignore the images and text below the header):

 

http://www.senseiconnect.com/responsive%20design%20tutorial/test/OJindex.html

 

An example of how I would like it to look is on the image here (only the header above, not the smiling lady's face):

 

http://www.senseiconnect.com/responsive%20design%20tutorial/test/template%20draft.png

 

Many thanks.

[niche]

Where's your nav tag css?

Edited July 30, 2014 by niche

[dsonesuk]

For single line of nav text you usually make the line-height of anchor the same height as nav bar, i should set margins, padding for ul, and li to zero, else they will affect the vertical alignment, the use left right padding on anchor to align horizontal at a fixed distance apart.

[jools]

Thanks both. Sorry for the slow reply.

 

My nav tags css are:

 

nav {height:20px;font-family: Meiryo;font-size: 10px;background-color: #F96;color: #000;border: thin solid #F60;vertical-align: middle;text-align: center;margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom:0px;}nav li {display: inline; margin-left: 10px; height: auto;margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom:0px; }nav li a {color: rgb(255,255,255); margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom:0px;text-decoration: none;  }

Edited July 30, 2014 by jools

[jools]

I am still getting the text outside the bottom of my nav, The source code is:

 

<nav><ul><li><a href="index.php">home</a></li><li><a href="WhatWeOffer.php">what we do</a></li><li><a href="aboutus.php">what we do</a></li><li><a href="HowToUse.php">what we do</a></li><li><a href="FAQ.php">what we do</a></li><li><a href="TeacherGuide.php">what we do</a></li> <li><a href="JoinNow.php">what we do</a></li> <li><a href="contactus.php">what we do</a></li></ul></nav>

[dsonesuk]

ul as well as li have default margins, and in some browsers a default text-indent, so you have to zero these, as well as remove list styling.

            nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}            nav {                height:20px;                font-family: Meiryo;                background-color: #F96;                color: #000;                border: thin solid #F60;                vertical-align: middle;                text-align: center;                /* margin-bottom: 0px;                 margin-top: 0px;                 padding-top: 0px;                 padding-bottom:0px;*/            }            nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */            nav li {                display: inline-block;                /*margin-left: 10px; height: auto;                margin-bottom: 0px;                margin-top: 0px;                padding-top: 0px;                padding-bottom:0px;*/                /*border-left: 1px solid #fff;*/            }            /*nav li:last-of-type {border-right: 1px solid #fff;}*/            nav li a {                display: inline-block;                color: rgb(255,255,255);                /*margin-bottom: 0px;                margin-top: 0px;                padding-top: 0px;                padding-bottom:0px;*/                font-size: 10px;                text-decoration: none;                line-height: 20px; /* matches height of nav*/                padding: 0 15px;            }

Edited July 31, 2014 by dsonesuk

[jools]

Many thanks dsonesuk!