Centering an element in css

Question

I am sure this question has been asked, and usually I can accomplish this with margin: 0 auto; or something else, but on this site: otgtires.com I cannot seem to get the navigation bar on top to center within its parent element. I would paste some code here but I think using dev tools in your browser is easier. Please let me know what I am missing!

EDIT: Zoom out if it already seems centered.

So if you zoom up the browser on the site, you will see that all the other elements keep their positions relative to each other, but the navigation bar keeps to the left. I want the nav bar to stay centered on the page no matter how zoomed in/out the users window is.

user1108579 · Accepted Answer · 2012-05-28 19:10:26Z

It's not "centered" because it's currently using a percentage-based width. Try a fixed width instead:

#top_navigation { width: 500px; margin: 0 auto; }

Edit:

Also, consider using the following clear-fix since the navigation elements are inline and the content below tends to get mixed up when the browser width is shortened:

#top_navigation { overflow: hidden; }

Here's a screenshot of your site with the above code injected demonstrating the horizontal centering:

enter image description here

@davidisawesome Would you mind editing your question to be more specific then?
Crap, you were right, my bad. While messing around with this I had set display: inline-block, which made your fix not work. Removed that and it is good! I really need to get into LESS so I can clean up my stylesheets a bit. Thanks

salab · Accepted Answer · 2012-05-28 19:12:05Z

1

#top_navigation { width: 1125px; margin: 0 auto 0 auto; }

answered May 28, 2012 at 19:12

salab

91 bronze badge

Comments

Greg B · Accepted Answer · 2012-05-28 19:06:58Z

@gmeben is correct it's because your

#top_navigation { width: 100% }

I quickly changed it to

#top_navigation { width: 1125px; margin: 0 auto; }

and it was centered.

Collectives™ on Stack Overflow

Centering an element in css

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related