93

<li>順序付けされていないリストを固定幅に中央揃えするにはどうすればよいdivですか？

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

4

16 に答える 16

165

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リンクは次のとおりです。

于 2011-07-30T12:05:11.190 に答える
146

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

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

それらの表示プロパティを変更した場合、または通常の配置ルールをオーバーライドする何か（フローティングなど）を行った場合、これは機能しません。

于 2009-11-10T13:48:28.950 に答える
52

私はフレックスボックスが大好きです：

ul {
  justify-content: center;
  display: flex;
}
于 2018-06-16T23:00:55.993 に答える
24

手順：

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

または使用する

<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>
于 2012-08-29T19:54:51.370 に答える
10

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

このCSSソリューションは、WidthプロパティとFloatプロパティを使用しません。フロート：左と幅：70％、異なるメニュー項目で異なるページにメニューを複製する必要がある場合、頭痛の種になります。

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

LIを左にフロートさせることにより、コンテンツを文字通り左にフロートさせ、次に上記のハックの1つを使用して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;
}
于 2016-05-16T13:48:10.183 に答える
6

どちらかである可能性があります

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

また

div li
{
text-align: center;
}

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

于 2009-11-10T13:48:48.333 に答える
4

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

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

于 2009-11-10T13:48:36.633 に答える
1

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

于 2009-11-10T14:46:56.990 に答える
1

試す

div#divID ul {margin:0 auto;}
于 2009-11-10T13:47:59.223 に答える
1

興味深いですが、ul内のfloated li要素でこれを試してください： ここの例

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

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

于 2012-05-03T10:32:11.710 に答える
0

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

ulこれにより、含まれているdivの中央に位置合わせされます

例：

HTML：

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

CSS：

  #container ul{
    width:300px;
    margin:0 auto;
  }
于 2009-11-10T13:49:37.137 に答える
0

これが私が見つけた解決策です：

#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;
}
于 2014-03-15T08:06:43.237 に答える
0

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

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;
}
于 2014-03-20T12:56:06.643 に答える
0

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

最も近いのはこの答えですが、パディングで幅の変化を調整する必要があります

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

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

以下の結果を参照してください。ボックスまでの距離<li>もすべて同じです。<ul>ここに画像の説明を入力してください

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

于 2018-05-28T18:00:54.750 に答える
-1 
<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>
于 2009-11-27T13:05:53.267 に答える
-5

オールドスクールのセンタータグを使用する

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

于 2009-11-10T13:48:56.553 に答える