web-dev-qa-db-ja.com

<ul> <li>をdivに中央揃え

いくつかの検索の後、<li>のリストを固定幅divに中央揃えする適切な方法が見つかりませんでした。

ページ 。を見てください。それも機能しません！

csshtmlhtml-lists
78
menardmam

ulおよびliエレメントはデフォルトでdisplay: blockであるため、それらを指定します 自動マージンおよびコンテナーより小さい幅 。

ul {
    width: 70%;
    margin: auto;
}

表示プロパティを変更した場合、または通常の配置規則をオーバーライドするような操作（フロートなど）を行った場合、これは機能しません。

125
Quentin

Ulを中央揃えにし、li要素も中央に配置し、ulの幅を動的に変更するには、display：inline-blockを使用します;中央のdivにラップします。

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

更新

これはjsFiddleリンクです 上記のコードへ。

156
Aram Kocharyan

手順：

  1. divの親ulにstyle="text-align:center;"を書き込む
  2. ulにstyle="display:inline-table;"を書き込む
  3. liにstyle="display:inline;"を書き込む

または使用する

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>
20
Dashrath

フレックスボックスが大好き：

ul {
  justify-content: center;
  display: flex;
}
14
Christian Michael

これは、ULをDIVコンテナの内側に配置するためのより良い方法です。

このCSSソリューションでは、WidthプロパティとFloatプロパティを使用しません。Float：Left and Width：70％。異なるメニュー項目を持つ異なるページ。

幅を使用する代わりに、パディングとマージンを使用して、テキスト/メニュー項目の周囲のスペースを決定します。また、LI要素でFloat：Leftを使用する代わりに、display：inline-blockを使用します。

LIを左にフロートすることにより、文字通りコンテンツを左にフロートし、次に上記のハックのいずれかを使用してULを中央に配置する必要があります。 Display：inline-blockは、Floatプロパティを作成します（並べ替え）。それはあなたのLI要素を受け取り、それを互いに浮かび上がらないブロック要素に変えます。

レスポンシブデザインで、BootstrapやFoundationなどのフレームワークを使用すると、コンテンツをフロートして中央に配置しようとすると問題が発生します。それらにはいくつかの組み込みクラスがありますが、常にゼロから作成する方が良いでしょう。このソリューションは、動的メニュー（Adobe Business Catalystメニューシステムなど）に適しています。

このチュートリアルのリファレンスは、次の場所にあります。 http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}
8
DSA Web Specialists

どちらか

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

または

div li
{
text-align: center;
}

どのように見えるか（またはそれらを組み合わせて）に依存します

5
Florian Peschka

ブロックオブジェクト（ulなど）を中央に配置するには、幅を設定する必要があります。その後、オブジェクトの左右の余白をautoに設定できます。

ブロックオブジェクトのインラインコンテンツ（liのインラインコンテンツなど）を中央に配置するには、cssプロパティtext-align: center;を設定します。

3
anddoutoi

試して

div#divID ul {margin:0 auto;}
1
Keir

おもしろいですが、ul内でli要素をフロートさせて試してみてください： ここの例

ここでの問題：ulは、実際に中央に配置するために固定幅を必要とします。ただし、コンテナの幅（または動的）に対して相対的な値にしたい場合は、ul：0のautoが機能しません。

より良い方法は、UL/Liリストを手放し、別のアプローチを使用することです ここの例

1
Plippie

text-align: center;を<ul>に追加するだけです。問題が解決しました。

1
Jonny Haynes

私は同じケースを探しており、<li>の幅を変更してすべての回答を試みました。
残念ながら、すべてが<ul>ボックスの左右で同じ距離を取得できませんでした。

最も近い一致は this answer ですが、幅の変更を調整する必要があるパディングあり

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

以下の結果を参照してください。<li>から<ul>ボックスまでの距離はすべて同じです。 enter image description here

このjsFiddleで確認できます。
http://jsfiddle.net/qwbexxog/14/

0
Chetabahana

ここに私が見つけることができる解決策があります：

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}
0
Adam Boostani

ulの幅がわかっている場合は、ulのマージンを0 auto;に設定するだけです

これにより、ulがdivの中央に配置されます

例：

HTML：

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS：

  #container ul{
    width:300px;
    margin:0 auto;
  }
0
Jamie Dixon

別のオプションは次のとおりです。

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>

CSS：

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}
0
Trapo