Jump to content

Centering text in a nav tag.


Recommended Posts

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.

Link to post
Share on other sites

Where's your nav tag css?

Edited by niche
Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by jools
Link to post
Share on other sites

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>
Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...