Как центрировать неупорядоченный список?

Мне нужно центрировать неупорядоченный список неизвестной ширины, сохраняя при этом элементы списка влево.

Достигните того же результата, что и:

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

div { text-align: center; }
ul { display: inline-block; text-align: left; }

За исключением моего <ul> не имеет родительского div. ul { margin: 0 auto; } не работает, потому что у меня нет фиксированной ширины. ul { text-align: center; } не работает, потому что элементы списка больше не будут выровнены. Итак, как я могу центрировать этот <ul>, сохраняя при этом <li> выравнивание влево (без наличия родительской обертки div)?

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

EDIT: Возможно, моя формулировка не была лучшей... Первый блок кода уже работает... мне нужно сделать это без <div> обертка, если это возможно, конечно. Поплавковые трюки? Псевдоэлементные трюки? Должен быть способ.

Ответы

Ответ 1

<html>
<body>    
<style>
    ul { display:table; margin:0 auto;}
<style>
     <ul>
        <li>56456456</li>
        <li>4564564564564649999999999999999999999999999996</li>
        <li>45645</li>
    </ul>
    </body>
</html>

http://jsfiddle.net/fNFYr/25/

EDIT: не заметил проблему с шириной.

Ответ 2

http://jsfiddle.net/psbu2/3/

Если вы можете использовать свои собственные пули списка

Попробуйте следующее:

<html>
    <head>
        <style type="text/css">

            ul {
                margin:0;
                padding:0;
                text-align: center;
                list-style:none;                
            }
            ul  li {
                padding: 2px 5px;               
            }

            ul li:before {
                content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
            }
        </style>
    </head>
    <body>

            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>

    </body>
</html>

Ответ 3

С вашего поста я понимаю, что вы не можете установить ширину в li

так что об этом?

<ul>
    <li>Hello</li>
    <li>Hezkdhkfskdhfkllo</li>
    <li>Hello</li>
</ul>

CSS

ul{
border:2px solid red;
display:inline-block;
}
li{
  display:inline;
  padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/
}

Вот демо. http://codepen.io/anon/pen/HhBwx