Centering vertical list with text align left

aspless · June 25th, 2010, 05:10 AM

Ok found myself with quite an interesting css issue.

Using a pure div / css design i am creating a questionare which is using a mix of Jquery colorbox elements using % width / height.
The layout is essentially question on the top, separator and answers underneath.

The issue i am having is the layout of the answers.

What i am trying to achieve is a vertical list of answers which is aligned center but with the answer aligned left so that the longest answer determins the horizontal centering.

The construct so far would be:

Code:

<div id="bottom_content">
<ul id="answer_ul">
<li  id="answer_li">1) This is a short answer</li>
<li  id="answer_li">2) This is a longer answer</li>
<li  id="answer_li">3) This is a slightly longer answer</li>
<li  id="answer_li">4) This is a short answer</li>
</ul>
</div>

If the answers were all a fixed width i could use div's to center the content but no such luck..

CSS so far:

Code:

#bottom_content{
position:relative;
height:55%;
width:100%;
} 
 
#answer_ul{
list-style:none;
margin: 0 auto;
padding-top:5px;
text-align: center;
}
 
#answer_li{
font-family:tahoma;
font-size:19px;
padding-top:5px;
/*text-align:left;*/
}

The answers currently are just centered, by adding in text-align:left; to #answer_li it just moves the entire content to the left..

If anyone has any ideas or is clever enough to understand my ramblings please let me know..

Cheers

Aspless

chroniclemaster1 · June 26th, 2010, 04:38 PM

This is a really common issue. You've already done a great job in figuring out the most important part... this is really TWO things that you're trying to do.

1) You're trying to center the box for the list
2) You're trying to left align the text in the list

And two you've already taken care of. Anytime you want to justify text (which is an inline-level element) inside a block-level element, just use text-align: xxxxxx; and you can push it around however you want. This is a fairly robust operation and typically works just like you think it will.

One is definitely the tricky part. (Centering in general can be a pain) Here we are trying to center the box which bounds the list. Since the list is a block-level element we can't use the text-align property to center it. We have to set the left and right margins equal to each other. If you have specific requirements you can define

Code:

margin-left: 4em;
margin-right: 4em;

The key part is that they need to be equal. That's how you achieve centering.
However, in most cases you don't want to lock yourself down, so 90+% of the time you'll see...

Code:

margin-left: auto;

margin-right: auto;

That lets the browser determine how much space it has to work with, but keeps the margins equal so they stay nicely centered.

In practice, there are sometimes other things going on which can throw a monkey wrench into the works, especially if your page (XHTML) or your stylesheets (CSS) don't validate properly. See if that works, and if not check on the validation of your pages at W3C. Or I have them in my list of web resources.

aspless · June 28th, 2010, 11:08 AM

Cheers for the reply chroniclemaster1,

I have seen a few examples where using margin-left/right: auto; have been used before.

Initially the centering still did not work until i changed the display type to display: table;

Code:

#answer_ul{
position:relative;
list-style:none;
display: table;
margin-left:auto;
margin-right:auto;
padding-top:5px;}

Would this be an acceptable method or would you advise agaist table displays?

Cheers

Aspless

chroniclemaster1 · June 28th, 2010, 12:53 PM

Wow, that's a really interesting question. The $64,000 answer is that I think using table is fine (this is the last sentence of the post however, I had to write everything below to think about).

I have generally avoided table display, not for any particular reason, but just because I've never had the occasion. The only people I know who've actually used various table displays are some guys from Sitepoint. After IE8 came out with ACID2 compliance, they wrote a book called Everything You Know About CSS is Wrong. Their premise was that table based layouts were so simple to create that they became popular but were too complicated to modify leading to the move towards CSS; now using the exact table and some related display attributes that you've employed they were saying you can have the best of both worlds. I remain unconvinced of the premise, but Sitepoint is a fairly web standards oriented shop, so I don't think they'd recommend something that wasn't ready for primetime. I would suspect that you're fine on that score.

Moreover, we're not talking about some random feature, for whatever reason centering is one of the most subtle operations in CSS. I'm a little more willing to get creative to find a solution that works with centering than I am at other tasks styling tasks which don't need the same level of finessing.

Given that Sitepoint has put it at the center of a whole CSS model, I'd say that display: table; is a pretty small price to pay for getting it to work. Just check it cross browser and of course make sure your page and stylesheet validate if you haven't already checked. Sounds like you've done some great work!

aspless · June 29th, 2010, 08:12 AM

chroniclemaster1,

Thanks again for your detailed reply.

Being a bit of an old school developer that originally worked in table layout, working with pure div / element controlled CSS is all a bit new.

The advantages are becoming all too aparent compared to the sometimes restrictive constraints of table design..

As the name suggests also being a classic asp coder means i am a bit behind with the server side technologies as well but i go by the rule of what works for now.. Dot Net i realise is "The way to go" but making the transition is still a tad dawnting for a relitive coding simpleton like myself.. lol

Now for some vertical alignment fun .. Fingers crossed ..

Cheers

Aspless