1

I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.

By following the instructions on the W3 Schools page on CSS centering, I came close by setting:

display: block; margin: auto; width: 99%;

But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?

If it matters, the site has been built with WordPress.

Thanks.

Improve this question
3
  • 99% is safe assuming that all browser defaults for margins and padding still apply. Commented Oct 24, 2017 at 12:24
  • have you tried flex ? Something like: .ut-nav-tabs{display:flex;justify-content:center;}.ut-nav-tabs li {margin:0 1px;} ? Commented Oct 24, 2017 at 12:30
  • the flex method shold work for you, you can just use above style Commented Oct 24, 2017 at 12:33

2 Answers 2

Reset to default
1

You have two ways you could approach this:

The text-align: center Method

.ut-nav-tabs li { display: inline-block; float: none; vertical-align: top; } .ut-nav-tabs li:last-child { margin-right: 0px; } .ut-nav-tabs { text-align: center; }

This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.

The display: flex Method

.ut-nav-tabs { display: flex; justify-content: space-around; } .ut-nav-tabs li { float: none; margin-right: 0px; }

This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now. Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.

Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

OK thanks, that worked. I went with the text-align: center method because of your warning about limited support for flex-box. If both methods work just as fine, I'll stick with the one with slightly more support. One small lingering issue is with the layout at lower screen widths. The elements become slightly out of alignment (screenshot: imgur.com/uTIaT0D). You can see it especially ~445 px screen widths. Thoughts on that?
Good call. Those are your margins you have declared on your list items, you can remove them altogether, or declare rules like this: .ut-nav-tabs li:nth-child(even) { margin-right: 0px; } for those resolutions. You may have to adjust rules in this manner for a few resolutions scaling down - that's just part of responsive design (but that goes beyond the scope of this question). You can handle this by setting @media breakpoints to declare new rules you'll need for the screen sizes you set (e.g: @media (max-width: 445px))
See: smashingmagazine.com/2011/01/…
OK understood on all. I'll work on the responsiveness separately. Let's consider this question answered then.
0

I think this way is better :

.ut-nav-tabs { width: 100%; text-align: center; } .ut-nav-tabs li { width: 179px; float: none; display: inline-block; zoom: 1; vertical-align: middle; }
Improve this answer

1 Comment

Thanks for this. I went with the solution proposed by @UncaughtTypeError. It worked, but also, I was a little hesitant to use the zoom property. I'd never seen it, so I researched it a little. This page (css-tricks.com/almanac/properties/z/zoom) kind of scared me away from using it. What was your motivation for using it? Was it indeed to resolve rendering issues in IE (as the article mentions)?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.