5

I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:

http://codepen.io/scotthorn/pen/eutAH?editors=110

If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.

Hopefully that makes sense, if not I can make a mockup.

Scott Horn
  • 76
  • 2
  • This post may help: [How to get tiles centered and left-justified at the same time](http://stackoverflow.com/questions/21146847/how-to-get-tiles-centered-and-left-justified-at-the-same-time) – Danield Nov 02 '14 at 08:47
  • Yup, that post is exactly what I'm talking about. Thank you! Kinda sucks that there's no current way to do it without a bunch of media queries. – Scott Horn Nov 02 '14 at 22:33
  • You could [do it](http://stackoverflow.com/a/33511762/274502) with jQuery: `$('#id container').each(function(){ $(this).parent().width($(this).width()); });`, but it's still sad CSS can't do it (I guess, after trying to figure it out for a few hours). – cregox Nov 04 '15 at 00:40

2 Answers2

0

I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.

Or you may be able to use margins to squish the inside content.

ablueman
  • 145
  • 1
  • 3
  • 13
-1

Your example works well, except you probably want to add a max-width to your UL..

For example, if you wanted to have a max of 7 items per line in your case, you would add:

ul { max-width:630px}

updated codepen

good luck =)

Community
  • 1
  • 1
webkit
  • 3,349
  • 1
  • 16
  • 18
  • I'm wanting to not hardcode the number of elements that fit, but for it to be responsive and put as many in a row as fits on a given device. – Scott Horn Nov 02 '14 at 22:29