John-Luke Posted December 7, 2014 Share Posted December 7, 2014 First I'd like to pay my homage by thanking everyone involved in w3schools. I am utterly grateful for the knowledge and support it provides for anyone around the world. Amazing. I am trying to center the nav links in my nav div. I may of made future problems for myself by the way I've tried to fix this but we shall see! This is the first half of the source code to give you an idea: <!doctype html> <html lang="en-GB"> <head> <title>Fly Elstree</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="main.css" rel="stylesheet" type="text/css"> <style> h1, h2, p { text-align: center; } </style> <meta name="description" content="Fly Elstree is a traditional flying school infused with the latest knowledge. Flight training, tests and aircraft rental based at Elstree Aerodrome, North London."> </head> <body> <div id="container"> <div id="heading"> <h1>Fly Elstree</h1> <h2><i>Flight Training, Tests and Aircraft Rental</i></h2></div> <div id="nav"> <ul> <li><a href="index.html" title="Home" target="_self">Home</a></li> <li><a href="staff.html" title="Staff" target="_self">Staff</a></li> <li><a href="aircraft.html" title="Aircraft" target="_self">Aircraft</a></li> <li><a href="servicesandpricelist.html" title="Services and Price List" target="_self">Services and Price List</a></li> <li><a href="honestanswers.html" title="Honest Answers" target="_self">Honest Answers</a></li> <li><a href="findcontactus.html" title="Find/Contact Us" target="_self">Find/Contact Us</a></li> </ul> </div> <div id="text"> ........... And this is my main.css: @charset "utf-8"; #container { padding-top: auto; padding-bottom: auto; padding-left: auto; padding-right: auto; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; position: relative; } #heading { } #text { padding-top: auto; padding-right: auto; padding-bottom: auto; padding-left: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; position:relative; } #footer { bottom: 0vmax; } #nav { display: block; padding-top: auto; padding-right: auto; padding-bottom: auto; padding-left: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; position: relative; min-height: 30px; } #nav ul { list-style-type: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; } #nav li { float: left; position: relative; } #nav a { display: block; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 20px; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; position: relative; font-size: 1em; } #text p { } #nav a:hover { background-color: #00D8F3; } a { text-decoration: none; color: #000000; font-style: normal; font-weight: bold; padding-top: auto; padding-right: auto; padding-bottom: auto; padding-left: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; position:relative; } As you can see my aim is to for everything to be center aligned and displayed equally. I have a feeling I should remove some of the stuff, or maybe I can keep it? But for now, I would be eternally grateful if someone can enlighten me on how to center the links in the nav bar, atm they float to the left instead of the center. Thank you very much even just for reading and a million times more for helping a noob on the other side of the world (or next door to you). 1 Link to comment Share on other sites More sharing options...
Ingolme Posted December 7, 2014 Share Posted December 7, 2014 Setting padding to "auto" does nothing, so you can remove all that. The "auto" value for margin only applies to the left and right margins, so you can remove half of your margin rules as well. Types of elements There are two major types of elements: inline and block. Inline elements behave like a letter in text. They can have content to the left and right of them. Examples of inline elements are <span>, <a>, <strong>, <em>, <small>. Block elements force other page content below or above them. They can have width, height, margin and padding. Examples of block elements are <div>, <h1> to <h6>, <p>, <header>, <footer>, <section> and others. Shorthand forms of CSS properties Most CSS properties have a shorthand form. Margin, padding, border properties, background, fonts. For your case, the ones you should pay attention to are margin and padding. They can take one value, two values, three values or four values. One value: All sides have 10px margin: 10px; Two values: Top and bottom have 10px left and right have 20px. margin: 10px 20px; Three values: Top has 10px, left and right have 20px, bottom has 30px. margin: 10px 20px 30px; Four values: Starting from the top, move clockwise: top 10px, right 15px, bottom 20px and left 40px. margin: 10px 15px 20px 40px; Centering content How you center something depends on what kind of element it is. Block elements are centered if they have a specified width and you set their left and right margins to "auto". <div id="box">A centered box</div>#box { width: 500px; margin: 0 auto; background-color: #EEE;} Inline elements are centered if their parent element has text-align set to "center" <div id="box"> <a href="#">Centered link</a></div>#box { text-align: center;} Link to comment Share on other sites More sharing options...
John-Luke Posted December 8, 2014 Author Share Posted December 8, 2014 "Thank you so much" doesn't even do justice for how much you've helped me and how grateful I am for taking time to explain that to me. But without crossing the line from thankful and grateful to strange and weird, I guess it will have to do! Thank you very much! God bless. Link to comment Share on other sites More sharing options...
Chikwado Posted December 8, 2014 Share Posted December 8, 2014 But in my own question: what is wrong with using "text-align:center"? In my webpage I use #nav{text-align:center;} and it works very fine for me. Link to comment Share on other sites More sharing options...
Ingolme Posted December 8, 2014 Share Posted December 8, 2014 If it works for you then there's no problem. There are two methods for the two different situations you will encounter. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2014 Share Posted December 8, 2014 'text-align: center;' won't work for li, or a elements using display; block; or float, only on display: inline; or display: inline-block; without floating. Note also inline-block is not fully supported on older versions of IE. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2014 Share Posted December 8, 2014 I used this method to centre display: block; floated menu elements http://www.cssplay.co.uk/menus/centered.html 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