This is my first attempt at responsive design, so I'm keeping it simple.
I have a
which is centrally aligned, with rows of 3 images. However, if the last row has only 1 or 2 images, the entire row is centrally aligned, and I wish to align the images to the left (so they are vertically aligned with the ones on top).
This would be easilly accomplished with
. However, I want the number of images on each row to adapt to the window size, while keeping the
centered on screen.
Here's a jsFiddle
with only one item on the bottom row, which is centered. If you resize the window so it becomes smaller, the number or items on each row will adapt and the list will remain centered on screen, but the last row will still be centered. Is there any way I can align the last row to the left?
Here's some pictures, as requested. This is what I'm looking for:
on screen, but the bottom row is aligned to the left.
However, if we resize the window, the list will adapt, but the
is still centered
on screen, and the bottom row is still aligned to the left.
How can I accomplish this?