ホームページ > 記事 > ウェブフロントエンド > CSS で親 Div のない順序なしリストを中央に配置するにはどうすればよいですか?
CSS で親 Div のない順序なしリストを中央に配置するにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-10-30 12:33:25914ブラウズ
親 DIV のない順序なしリストを中央揃えにする方法
CSS で、左を維持しながら順序なしリスト (
- ) を中央揃えにする-aligned リスト項目は、親 div を使用しないと困難になる可能性があります。この効果を実現する方法は次のとおりです。
- ) によって定義されるテーブルのような構造が作成されます。
- で margin: 0 auto を設定すると、テーブル (つまり、リスト) が含まれる要素の中央に配置されます。
この効果を実現する CSS コードは次のとおりです:
<code class="css">ul { display: table; margin: 0 auto; }</code>デモのために、提供された HTML を使用するが親 div を持たないコード スニペットを次に示します。
<code class="html"><html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html></code>このコードは、リスト項目を左揃えに保ちながら、順序なしリストをページの中央に配置します。
以上がCSS で親 Div のない順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
親 div を持つ提供されたコード スニペットでは、div で text-align: center を使用し、ul で display: inline-block を使用してリストを中央に配置します。ただし、この方法には親 div ラッパーが必要です。
親 div を使用せずに順序なしリストを中央に配置するには、margin や text-align などの CSS プロパティを効果的に使用できません。
解決策は、
- を設定することです。テーブルのように動作するには、display: table を使用します。これにより、行がリスト項目 (
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。