css liを水平および中央に配置する方法

Css li の水平方向の中央揃え方法: 最初に HTML サンプル ファイルを作成し、次に li タグを定義し、最後に「overflow: hidden;margin: 100px auto;」などの属性を使用して水平方向の中央揃えを実現します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

複数列 li 要素の水平方向のセンタリング効果を実現する CSS メソッド

複数列 li 要素の水平方向のセンタリング効果を実現するコード例を共有します。

ここでの水平方向のセンタリングは、実際には li 要素の一様分布効果です。

コード例は次のとおりです:

レンダリング:

上記のコードは要件を満たしています。ここで簡単に紹介します。 . 実現原理。

ul 要素の幅を li 要素の幅にマージンを加えた値に設定し、この値を w とします。

ul の親要素の幅は w-margin-right (20px) で、この親要素に overflow:hidden 属性があると、余分なマージンが非表示になります。

推奨: 「css ビデオ チュートリアル」

以上がcss liを水平および中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。