Align to Center

[Mikeyham]

I'm trying to make a page with the content running right through the middle, but when I try to do this with position: relative, position: absolute, or even margin-left, it looks different on different monitors. Is there anything that will just put it right in the middle, no matter the browser or monitor?Thanks!

[jeffman]

Yup. For modern browsers, you set the left and right margins of the centered item to auto. For older browsers, you set the text-align property of the item's container to center. So, assuming you want all your content in a big centered div, your CSS would look like this:

body, html {   text-align: center;}div.container {   margin: 0 auto;}

[Mikeyham]

That worked for the div part of my page, but the horizontal navigation bars at the top of the page won't conform to my commands >: ( They're <ul> nav bars with display: inline for the <li>. Is there a reason for this? Thanks again

[Sansespere]

Could you post the code for the <ul> nav bars? I don't really know what is wrong with them now.

[Ingolme]

In order to center a <ul> element, you have to give it a fixed width.

[Mikeyham]

Could you post the code for the <ul> nav bars? I don't really know what is wrong with them now.

Alrighty.CSS:

ul.nav_bars {   float: left;   width: 100%;   paddding: 0;   list-style-type: none;   margin: 0 auto;}li.nav_bar {display: inline}a.nav_link {   float: left;   padding: .2em .5em;   width: 9em;   background-color: #006400;   border-right: 1px solid white;   color: white;   text-decoration: none;}a:hover.nav_link {   background-color: #B22222;   text-decoration: underline;}

HTML:

<ul class="nav_bars">		<li class="nav_bar"><a href="http://www.mickeyham.com" class="nav_link">Home</a></li>				<li class="nav_bar"><a href="/pages/JS_directory.htm" class="nav_link">Javascript Practice</a></li>		<li class="nav_bar"><a href="/pages/Notes_directory.htm" class="nav_link">Notes</a></li>		<li class="nav_bar"><a href="/pages/banner.htm" class="nav_link">Banners Practice</a></li>		<li class="nav_bar"><a href="/pages/yoogloo.htm" class="nav_link">Yoogloo</a></li>		<li class="nav_bar"><a href="#" class="nav_link" style="border-right: none">More to Come!</a></li>	</ul>

If you want to see what they're doing, it's at http://www.mickeyham.com. The nav bars aren't in the center of the page, they're off to the left.

[Mikeyham]

In order to center a <ul> element, you have to give it a fixed width.

Originally, the width was set to 100%. I tried to set it to 54em (the width of the 6 nav bars), and then to 60, but it didn't do anything :'(

[Sansespere]

Your padding inul.nav_bars { float: left; width: 100%; paddding: 0; list-style-type: none; margin: 0 auto;}has 3 d's. I changed it on my browser it goes over to the left when spelled correctly. Let me experiment some more

[Mikeyham]

Your padding inul.nav_bars { float: left; width: 100%; paddding: 0; list-style-type: none; margin: 0 auto;}has 3 d's. I changed it on my browser it goes over to the left when spelled correctly. Let me experiment some more

No need. The problem was solved with a little help =) But thanks alot!

[ialien]

No need. The problem was solved with a little help =) But thanks alot!

Hi, would you mind sharing the fix. I'm going through something kind of similar.Thanks.PD: I see several changes in the code, but would be helpful to know what was causing the problem and what fixed it.

[Mikeyham]

Hi, would you mind sharing the fix. I'm going through something kind of similar.Thanks.PD: I see several changes in the code, but would be helpful to know what was causing the problem and what fixed it.

The em of each link was set to 9, which was too large for each link. When the width of the <ul> was set to 100%, it made the browser think that the <ul> was alot longer than it really was, so the center of it was far off to the right, so when the browser tried to put the <ul> in the center, it made it seem like they were off to the left. Through some trial-and-error, the width of the longest link was found to be 7.2em. Through some more trial-and-error, the width of the entire <ul> was found to be 52em. They were then successfully placed in the middle through the "margin: 0 auto" property. My advice would be to find the width of the longest link, as stated above, then find the length of the entire thing. It won't be exactly the width of each link times how many links there are, because you have to account for padding, borders, etc. Then simply place it in the center using "margin: 0 auto" or "text-align: center".