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

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

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>

РЕДАКТИРОВАТЬВозможно, моя формулировка была не самой лучшей ... Первый блок кода уже работает ... мне нужно сделать этобез <div> Обертка, если это возможно, конечно. Трюки с плавающей точкой? Трюки с псевдоэлементами? Должен быть способ.