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

<p>мне нужно центрировать неупорядоченный список неизвестной ширины, сохраняя выравнивание по левому краю.</p><p>достигнуть того же результата, что и этот:</p><p><strong>html</strong></p><pre><code><div> <ul> <li></li> <li></li> <li></li> </ul> </div> </code></pre><p><strong>css</strong></p><pre><code>div { text-align: center; } ul { display: inline-block; text-align: left; } </code></pre><p>за исключением того, что мой <code><ul></code> не имеет родительского div. <code>ul { margin: 0 auto; }</code> не работает, потому что у меня нет фиксированной ширины. <code>ul { text-align: center; }</code> не работает, потому что элементы списка больше не будут выровнены. итак, как я могу центрировать этот <code><ul></code>, сохраняя выравнивание <code><li></code> влево (без родительской оболочки div)?</p><pre><code><ul> <li></li> <li></li> <li></li> </ul> </code></pre><p><strong>edit</strong>: возможно, моя формулировка была не самой лучшей ... первый блок кода уже работает ... мне нужно сделать это<strong> без </strong>оболочки <code><div></code>, если это возможно, конечно , трюки с плавающей точкой? трюки с псевдоэлементами? должен быть способ.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>ul { display:table; margin:0 auto;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html></code></pre> </div> </div> </p>

<p> <a href="http://jsfiddle.net/psbu2/3/">http://jsfiddle.net/psbu2/3/</a> </p><p>если вы можете использовать свой собственный список пуль</p><p>попробуй это:</p><pre><code><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> </code></pre>

<p>для выравнивания по центру неупорядоченного списка необходимо использовать свойство выравнивания текста css. в дополнение к этому, вам также нужно поместить неупорядоченный список в элемент div.</p><p>теперь добавьте стиль в класс div и используйте свойство text-align с центром в качестве значения.</p><p>смотрите пример ниже.</p><pre><code><style> .mydivelement{ text-align:center; } .mydivelement ul li{ display:inline; } </style> <div class="mydivelement"> <ul> <li>home</li> <li>about</li> <li>gallery</li> <li>contact</li> </ul> </div> </code></pre><p>вот ссылка на сайт <a href="https://tutorialdeep.com/knowhow/center-align-unordered-list-inside-div-css/">центр выровнять неупорядоченный список</a> </p>