it-swarm.com.ru

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

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

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

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>, если это возможно, конечно , Трюки с плавающей точкой? Трюки с псевдоэлементами? Должен быть способ.

17
Sunny

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

47
Dementic

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>
0
Timo Jungblut

Для выравнивания по центру неупорядоченного списка необходимо использовать свойство выравнивания текста CSS. В дополнение к этому, вам также нужно поместить неупорядоченный список в элемент div.

Теперь добавьте стиль в класс div и используйте свойство text-align с центром в качестве значения.

Смотрите пример ниже.

<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>

Вот ссылка на сайт Центр выровнять неупорядоченный список

0
ROSHAN PARIHAR