4

I'm having trouble left aligning the last row of a 'ul' element inside a fluid container. I have the container centering properly with the page but it ends up centering the last row of elements when they are not fully populated. Can't seem to figure out the solution.

I'm using Twitter Bootstrap at the very core with container-fluid for the outer div. And centering the list elements like so:

ul {
    text-align: center;
    list-style:none;
}

ul li {
    display: inline-block;
}

I've tried using text-align: justify and centering the div with margins but it doesn't seem to move with the resizing of the page. Suggestions?

Here are two screenshots of what's happening:

enter image description here

enter image description here

JS Fiddle Example: http://jsfiddle.net/Z9uqQ/

Last line should be aligned left with the same vertical edge as 1.

enter image description here

codeisforeva
  • 471
  • 5
  • 20

1 Answers1

0

If I understand correctly margin: 0 auto will do:

ul {
    width: 90%;
    margin: 0 auto;
}

Demo: http://jsfiddle.net/elclanrs/GdAvm/

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • This does not work because on resize of the container, the content is no longer centered. Thanks though. – codeisforeva Sep 19 '12 at 22:35
  • I have added a new screenshot depicting what your solution would do with images. – codeisforeva Sep 19 '12 at 22:39
  • Notice how it doesn't move the ul to the center. It just leaves everything on the left. – codeisforeva Sep 19 '12 at 22:40
  • Sry, I don't see what you mean... Can you make an example with actual images and twitter bootstrap to debug it properly? You can use images from http://placekitten.com to write a quick example. – elclanrs Sep 19 '12 at 22:44
  • No need for bootstrap. http://jsfiddle.net/Z9uqQ/1/ updated. Notice how when you drag the output container to the left, the UL does not re-center itself in the container. – codeisforeva Sep 19 '12 at 22:49
  • I've done some test, I think you might need some JavaScript then, can't seem to find a solution with just css. – elclanrs Sep 19 '12 at 23:06