web-dev-qa-db-ja.com

順不同リストを中央揃えにする方法は？

リスト項目を左揃えのままにしながら、幅の不明な順序付けられていないリストを中央に配置する必要があります。

これと同じ結果を達成します。

[〜＃〜] 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>s左揃え（親divラッパーなし）？

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

[〜＃〜] edit [〜＃〜]：おそらく私の言葉遣いは最高ではなかった...コードの最初のブロックはすでに機能しています...必要なのはそれを行うことですなし<div>もちろん、それが可能な場合はラッパー。フロートトリック？擬似要素のトリック？方法がなければなりません。

htmlcsshtml-listscenter
22
Sunny
ul { display:table; margin:0 auto;}
<html>
<body>    
<ul>
        <li>56456456</li>
        <li>4564564564564649999999999999999999999999999996</li>
        <li>45645</li>
    </ul>
    </body>
</html>
55
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テキストのalignプロパティを使用する必要があります。これに加えて、順序付けられていないリストをdiv要素内に配置する必要もあります。

次に、スタイルをdivクラスに追加し、centerを値として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>

こちらがリファレンスWebサイトです Center Align Unordered List

0
ROSHAN PARIHAR