Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Horizontal centering using CSS fit-content value

DZone's Guide to

Horizontal centering using CSS fit-content value

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Published at DZone with permission of Catalin Red, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}