A centered CSS navigation with fit-content (#snippet)

Last week I shared a #devsheet covering the CSS width properties min-content, max-content, and fit-content. I recommend having a look if you’re not familiar with these CSS properties.
While reading about these underused properties, …


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Last week I shared a #devsheet covering the CSS width properties min-content, max-content, and fit-content. I recommend having a look if you're not familiar with these CSS properties.

While reading about these underused properties, I discovered a neat pattern to build a centered navigation bar on CSS-Tricks.

The pattern uses fit-content to make the navigation take the exact amount of space to fit in all entries. The list container is then moved into the horizontal center using margin: 1em auto;.

ul {
  background: deepskyblue;
  padding: 1em;
  /* try to give the list as much space as needed */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* move the container to the center on the X-axis */
  margin: 1em auto;
}

li {
  display: inline-block;
  background: tomato;
  padding: .5em;
}

If you tried to give a centered navigation bar the exact fitting width paired with a background or border color, you might have already lost some hair on this problem.

Using fit-content is a beautiful solution, and I'm sure I'll reuse this pattern repeatedly in the future!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-08T17:37:29+00:00) » A centered CSS navigation with fit-content (#snippet). Retrieved from https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/.
MLA
" » A centered CSS navigation with fit-content (#snippet)." Stefan Judis | Sciencx - Saturday November 21, 2020, https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/
HARVARD
Stefan Judis | Sciencx Saturday November 21, 2020 » A centered CSS navigation with fit-content (#snippet)., viewed 2022-12-08T17:37:29+00:00,<https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » A centered CSS navigation with fit-content (#snippet). [Internet]. [Accessed 2022-12-08T17:37:29+00:00]. Available from: https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/
CHICAGO
" » A centered CSS navigation with fit-content (#snippet)." Stefan Judis | Sciencx - Accessed 2022-12-08T17:37:29+00:00. https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/
IEEE
" » A centered CSS navigation with fit-content (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/. [Accessed: 2022-12-08T17:37:29+00:00]
rf:citation
» A centered CSS navigation with fit-content (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2020/11/21/a-centered-css-navigation-with-fit-content-snippet/ | 2022-12-08T17:37:29+00:00
https://github.com/addpipe/simple-recorderjs-demo