html - センタリングの仕方
リストで

Question

解決できない問題があります。

次のようなリストのリストがあります。

<ul id="nav">
    <li>
        <div  class="tabquad">
            Item 1
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=1">
                    <div  class="tabquad">
                        1.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=2">
                    <div  class="tabquad">
                        1.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=3">
                    <div  class="tabquad">
                        1.3
                    </div>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <div  class="tabquad">
            Item 2
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=7">
                    <div  class="tabquad">
                        2.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=8">
                    <div  class="tabquad">
                        2.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=9">
                    <div  class="tabquad">
                        2.3
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=10">
                    <div  class="tabquad">
                        2.4
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=11">
                    <div  class="tabquad">
                        2.5
                    </div>
                </a>
            </li>
        </ul>
    </li>
</ul>

このCSSで：

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

#nav {
    width: 45em;
    margin: 0 auto;
}

#nav a {
    display: block;
    width: 15em;
}

#nav li {
    float: left;
    width: 15em;
}
#nav li ul {
    position: absolute;
    width: 15em;
    left: -500em;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
.item{
    color:#0E4063;
    text-decoration:none;
}
.tabquad{
    color:white;
    margin:auto;
    position:relative;
    border:1px solid #000;
    border-color:rgb(82,115,154);
    width:200px;
    height:30px;
    text-align:center;
    padding-top:10px;
    top:25px;
    background-color:rgb(0,56,130);
}
    .tabquad:hover{
    background-color:rgb(49,87,132);
    cursor: hand;
}

私の問題は次のとおりです。項目 1 のリストと項目 2 のリストがページの中央になく、左向きです。

センターパラメータとフロートを試しましたが、成功しませんでした。

なにか提案を？

ここでフィドルを見つけることができます:リンク

score 4 · Accepted Answer

#nav の幅を正しい値 (コンテンツの幅に対応) に設定する必要があります。例を次の値に変更すると、2 つのメニューがページの中央に配置されます。

#nav {
    width: 30em;
    margin: 0 auto;
}

更新された jsFiddle: http://jsfiddle.net/F9Wrb/17/

ブラウザ間の互換性を高めるために、次の CSS を #nav の親ノードに追加します。

body {
    text-align: center;
}

score 0 · Accepted Answer

これがあなたの解決策です。この 2 つのスタイルを変更しました。参考までに、html5 を使用していない限り、タグdiv内に配置することはできません。<a>無効です。

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align:center
}
#nav li {
    width: 15em;
    display:inline-block;
}

score 0 · Accepted Answer

考えられる解決策は次の 3 つです。

絶対配置と負の左マージンの使用:

#nav {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -15em;
}

デモ1

ul 幅を指定して自動マージンを使用する:
```
#nav {
    width: 30em;
    margin: 0 auto;
}
```
デモ 2
自動マージンソリューションを使用し、ul 幅を指定したくない場合は、LI をdisplay: inline-block(フローティングではなく) として宣言します。これが機能するのは、LI がフロートされているときのようにページフローの外ではなく、ページフロー内にあるためです。Kashif Raza の厚意により回答します。
```
#nav {
    margin: 0 auto;
}
#nav > li {
    display: inline-block;
    width: 15em;
}
```
デモ 3

score 0 · Accepted Answer

CSS ページのセンタリングとページレイアウトの基本について読みたいと思うかもしれません。

<div>通常、ページ全体を含み、ページのレイアウトと境界を定義する「コンテナ」があります。あなたはそれを何でも呼ぶことができます（必ずしもそうではありませんcontainer）

ここで、最適なレイアウトを決定する必要があります。最も一般的に使用されるレイアウトサイズはからまでの間で変化960pxします1200px。

コンテナの一般的なスタイリングは、

.container{
    width:960px; //<-- this can be anything, based on your layout.
    margin:0 auto;
}

これにより、ほとんどの場合、ページが中央に配置されます。ブラウザのデフォルトを確実にリセットするために、ある種のCSS リセットを使用することをお勧めします。

score -1 · Accepted Answer

#nav a {
    display: block;
    width: 15em;
    margin:auto;
}

#nav>li {
    width:50% !important;
}

#nav li:hover ul {
    position:relative;
    left: auto;
}

これらの変更を CSS で行うと、リストがページの中央に表示されます。

score -2 · Accepted Answer

周囲の div に幅を設定し、それを margin:0 auto に変更すると、ページの中央に配置されます。

.center{
    width:400px;
    margin:0 auto;
}

そして、float="center" ではなく html

<div class="center">

http://jsfiddle.net/F9Wrb/12/

前述のように、float="center"、さらに言えばfloat:center;!というものはありません。要素の高度な配置については、 zurbfoundationやGridpak.comなどの CSS フレームワークを使用することをお勧めします。

score -3 · Accepted Answer

-3

中心にしたい場所にこれを置きます：

div align="center"

于 2013-06-20T10:22:23.233 に答える

html - センタリングの仕方リストで

7 に答える 7

Related

Reference

html - センタリングの仕方
リストで