How do I center a list as shown here?

Question

I have just realized that the answer I accepted for my previous question was not quite correct - or, rather, I did not express the question correctly.

Given the list items

* item 1 is boring
* item 2 is a very long item indeed, oh yes it is
* item 3 is almost as boring as item 1

I would like 1) the left sides (bullets) of the list items to align vertically and 2) have the center character of the longest line be in the cerntre of the page. In this case, that would be approx the space between "item" and "indeed" in item 2.

Bad ascii art follows

---------------------------------------
|         * abc                        |
|         * qwertyuiopabcdef           |
|         * abc                        |
----------------------------------------

and not

---------------------------------------
|                 * abc                |
|                 * qwertyuiopabcdef   |
|                 * abc                |
----------------------------------------

score 2 · Accepted Answer · answered Mar 20 '11 at 03:55

If I understand correctly, this should be perfect for you:

The whole list will be centered with regard to the longest list item.
No explicit pixel width needs to be declared - all the "calculation" happens automagically.
I included the hacks required to make display: inline-block work in IE7.
I added a "center line" so you can easily see where the center is.

Live Demo

HTML:

<div id="container">
    <ul>
        <li>item 1 is boring</li>
        <li>item 2 is a very long item indeed, oh yes it is</li>
        <li>item 3 is almost as boring as item 1</li>
    </ul>
</div>

Relevant CSS:

#container {
    text-align: center
}
#container ul {
    text-align: left;

    display: inline-block;
    *display: inline;
    zoom: 1
}

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

I answered a similar question at Centering Bullets On A Centered List

Check working example at http://jsfiddle.net/8mHeh/2/

edited May 23 '17 at 12:11

Community

1
1

answered Mar 19 '11 at 06:31

Hussein

42,480
25
113
143

1

there'a a catch there, though in that "width:200px;" no it's not generic :-( – Mawg says reinstate Monica Mar 19 '11 at 08:24
1

Why is the width 200px? What happens if you make it 20px? List items wrap around to several lines, even though there is enough room onscreen for the text not to wrap. So it seems to me that you have to calculate that width to be enough accomodate your text and font-size. I would prefer a totally generic solution that will function for any screen size, text length, font, etc Please don't get me wrong; this is a good solution & very, very close, but not quite 100% (or am I wrong (again) ?) – Mawg says reinstate Monica Mar 20 '11 at 01:59
1

@mawg A div must have a defined width. CSS is not a dynamic language and does not calculate or detect width or height. If that is what you need, then you have to use JavaScript and in that case if you face any issues, you need to start another question. I gave you a valid answer based on your question and it's the best way to center li's. – Hussein Mar 20 '11 at 02:28
thirtydot's answer works nicely without hardcoding widths. This solution only works if you know the width of the longest line, which is tough if the text is dynamic (and hard to maintain regardless). – Neal Gokli Jun 28 '17 at 18:57

How do I center a list as shown here?

2 Answers2

Check working example at http://jsfiddle.net/8mHeh/2/

Linked