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

Web デザイン: 固定幅 Div 内の順序なしリストを中央に配置する

HTML 要素を操作する場合、特定の配置とサイズ変更が必要になるのが一般的です。典型的なシナリオには、定義された幅を持つコンテナ内の順序なしリスト (

) を中央に配置することが含まれます。このレイアウトを実現するには、CSS の機能を活用できます。

解決策:

を中央に配置し、
• を個別に中央に配置します。要素は、動的な幅調整を確保しながら、次の戦略を実装します:

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  説明:

  1. .wrapper クラスは、テキストを使用してリスト コンテナー全体を中央に配置します。 -align: center;.
  2. ネストされた .wrapper ul は、display: inline-block; を採用し、
     インラインプロパティを保持しながら、必要なスペースのみを占有します。また、デフォルトのマージンとパディングも削除され、適切な間隔が確保されます。
  3. 古いバージョンの Internet Explorer の場合は、ズーム: 1;ブラウザ間の互換性を確保します。
  4. *display: inline;インライン ブロックの動作を Internet Explorer 6 以前に適用します。
  5. 各
  6. 要素は
     内の中央に配置されます。 float: left; を設定することで。視覚的な魅力を高めるために、個別のパディングと境界線が追加されます。

  実装:

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

  注: このソリューションは最大幅を提供します。

  向けの柔軟性幅はコンテンツに合わせて動的に調整されます。

  更新:

  実践的なデモンストレーションについては、参考資料に記載されている jsFiddle リンクにアクセスしてください。

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