jools Posted July 29, 2014 Share Posted July 29, 2014 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 comment Share on other sites More sharing options...
niche Posted July 30, 2014 Share Posted July 30, 2014 (edited) Where's your nav tag css? Edited July 30, 2014 by niche Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2014 Share Posted July 30, 2014 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 comment Share on other sites More sharing options...
jools Posted July 30, 2014 Author Share Posted July 30, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
jools Posted July 30, 2014 Author Share Posted July 30, 2014 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 comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2014 Share Posted July 31, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
jools Posted August 6, 2014 Author Share Posted August 6, 2014 Many thanks dsonesuk! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now