固定幅の Div 内で順序なしリストを中央に配置するにはどうすればよいですか?

を使用した順序なしリスト (

) の中央揃え固定幅 Div 内の要素

このシナリオには、

を含む順序なしリスト (

) を中央に配置することが含まれます。固定幅の div 内の要素。これを実現するには、CSS 要素と div 要素の組み合わせを使用します。

Solution

2. Wrap the

   .wrapper {
       text-align: center;
   }

   次の CSS スタイルを「wrapper」クラスに適用します。

   • これにより、「wrapper」 div が中央揃えになり、

     .wrapper ul {
         display: inline-block;
         margin: 0;
         padding: 0;
         /* IE support */
         zoom: 1;
         *display: inline;
     }

     次の CSS スタイルを

     に適用します。 "wrapper" クラス内:
     • これにより、
       が作成されます。インライン要素のように動作し、そのコンテンツに基づいて動的に展開できます。

       .wrapper li {
           float: left;
           padding: 2px 5px;
           border: 1px solid black;
       }

       次の CSS スタイルを

       • に適用します。
         内の要素:

これにより、
• が確実に実行されます。要素は
  内で浮動します。

  <style>
      .wrapper {
          text-align: center;
      }
      .wrapper ul {
          display: inline-block;
          margin: 0;
          padding: 0;
          zoom: 1;
          *display: inline;
      }
      .wrapper li {
          float: left;
          padding: 2px 5px;
          border: 1px solid black;
      }
  </style>
  
  <div class="wrapper">
      <ul>
          <li>Element 1</li>
          <li>Element 2</li>
          <li>Element 3</li>
      </ul>
  </div>

  コード例

  以上が固定幅の Div 内で順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。