Jump to content

Align to Center


Mikeyham
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :'(
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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".
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...