web-dev-qa-db-fra.com

Comment centrer une liste non ordonnée?

Je dois centrer une liste non ordonnée de largeur inconnue, tout en maintenant les éléments de la liste alignés.

Obtenez le même résultat que cela:

HTML

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

CSS

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

Sauf que mon <ul> n'a pas de div parent. ul { margin: 0 auto; } ne fonctionne pas car je n'ai pas de largeur fixe. ul { text-align: center; } ne fonctionne pas car les éléments de la liste ne seront plus alignés. Alors, comment puis-je centrer ce <ul> tout en gardant le <li>s aligné à gauche (sans avoir un wrapper div parent)?

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

EDIT: Peut-être que ma formulation n'était pas la meilleure ... Le premier bloc de code fonctionne déjà ... ce dont j'ai besoin, c'est de le faire sans le wrapper <div>, si c'est possible bien sûr . Astuces de flotteur? Des astuces de pseudo-élément? Il doit y avoir un moyen.

htmlcsshtml-listscenter
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/

S'il vous est possible d'utiliser votre propre liste à puces

Essaye ça:

<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

Pour centrer une liste non ordonnée, vous devez utiliser la propriété d'alignement de texte CSS. En plus de cela, vous devez également placer la liste non ordonnée dans l'élément div.

Ajoutez maintenant le style à la classe div et utilisez la propriété text-align avec center comme valeur.

Voir l'exemple ci-dessous.

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

Voici le site de référence Centre Align Unordered List

0
ROSHAN PARIHAR