Home Fix centering last line of elements in fluid container grid to be left aligned while container stays centered
Reply: 1

Fix centering last line of elements in fluid container grid to be left aligned while container stays centered

codeisforeva
1#
codeisforeva Published in 2012-09-19 21:57:06Z

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:

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

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

elclanrs
2#
elclanrs Reply to 2012-09-19 22:33:45Z

If I understand correctly margin: 0 auto will do:

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

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.324517 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO