HTML5 Zone is brought to you in partnership with:

Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. You can find articles and tutorials on front-end web development by visiting his blog at red-team-design.com. Also, you can connect with him on Twitter as @catalinred. Catalin is a DZone MVB and is not an employee of DZone and has posted 26 posts at DZone. You can read more from them at their website. View Full User Profile

Horizontal centering using CSS fit-content value

03.08.2013
| 3123 views |
  • submit to reddit

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it’s about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

As we all know, centering this kind of stuff can be quite tricky sometimes. With this common example in mind, Roger made an awesome list with solutions you can apply in order to achieve horizontal centering.

CSS fit-content value and horizontal centering

Just another possible approach

Recently, I found out that Firefox and Chrome both support intrinsic widths and one of the most interesting value for width seems to be the fit-content one. Also, in this article you’ll see how fit-content can be a solution for solving the problem above.

Apparently, just as on tables, when you only need to add auto for left and right margins to center it horizontally, setting width: fit-content; to an element tells the browser the element’s width is defined by its content and will not automatically size to fill its containing block.

Proper example

Now, with Roger’s markup example:

<div class="navbar center">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About us</a></li>
        <li><a href="/">Our products</a></li>
        <li><a href="/">Customer support</a></li>
        <li><a href="/">Contact</a></li>
    </ul>
</div>

and the following CSS lines:

.center ul{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;   
}

… you just got a new experimental solution for centering horizontally a navigation bar which contains floated elements within. Pretty straightforward, huh? Don’t forget to check demo’s page source to see the full styles.

View demo

Minimal browser support, but really promising though.

Despite the poor browser support at this time (Chrome and Firefox), this might be a good alternative to keep in mind for the future. Just think about the CSS Flexbox module, at the beginning the support was quite minimal and now it’s getting wider and wider.

Also, you should be aware that fit-content value is kinda experimental and it’s not a final recommendation. It’s available in W3C Editor’s Draft and that means that specs might change in the future.

Published at DZone with permission of Catalin Red, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Chris Smith replied on Mon, 2013/03/11 - 9:42am

Very cool feature, Catalin. WIll definitely keep this in mind for future projects!

Catalin Red replied on Thu, 2013/04/18 - 3:33am in response to: Chris Smith

Hey Chris, it definitively worth keeping an eye on for the future. Thanks for your comment!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.