Over a million developers have joined DZone.
Platinum Partner

Horizontal centering using CSS fit-content value

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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">
        <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>

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.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Catalin Red , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}