centering unknown width elements inside a known width element

Question

I didn't find a solution for this problem:

For a nav bar, I have a ul with a specific width (530px), and inside it a few lis.

I want the lis to fill all the 530px width, with equal spaces between them. I can't hard-code this, as I don't know the width of each li.

Are these list items ("li"s) in a horizontal or vertical direction? — Erlik, Jun 06 '13 at 16:26
Maybe duplicate? [http://stackoverflow.com/questions/1695175/how-to-horizontally-center-an-unordered-list-of-unknown-width](http://stackoverflow.com/questions/1695175/how-to-horizontally-center-an-unordered-list-of-unknown-width) — Erlik, Jun 06 '13 at 16:36

score 0 · Answer 1 · answered Jun 06 '13 at 16:34

0

I'd recommend using tables with borders disabled...

Tables will equally separate text into individual cells.

Here is a nice description about them

answered Jun 06 '13 at 16:34

CHess

422
5
14

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I'd recommend Flexbox - the updated spec is fairly new, and you'll want to use a polyfill or vendor prefixes for broad browser support, but it's the direction this kind of task is going.

Here's a nice tutorial on creating a simple Flexbox-driven horizontal nav that will show you the basics.

As you can see, the browser support isn't yet perfect, but there are various polyfills and techniques available to you to make it rock solid. And you don't have to go far to find some more info about those resources. The key link from that related SO post is Chris Coyier's Using Flexbox.

centering unknown width elements inside a known width element

2 Answers2