Cthulhu Cthulhu - 1 year ago 97
CSS Question

Responsive: How to float:left li with centrally aligned ul?

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?

EDIT: Here's some pictures, as requested. This is what I'm looking for:
is centered on screen, but the bottom row is aligned to the left.

enter image description here

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.

enter image description here

How can I accomplish this?

Answer Source

Normally I would suggest giving the ul a fixed width and margin: 0 auto; to center, however if you want it to expand with the page, then just give it some fixed left and right margins.


ul {
    margin: 0 50px;

ul li {
    float: left;

ul li img {


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download