ホームページ > 記事 > ウェブフロントエンド > 親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?
親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-10-31 08:17:30652ブラウズ
左揃えのリスト項目を含む順序なしリストを中央揃えにする
Web デザインでは、リスト項目の左揃えを維持しながら順序なしリストを中央揃えにする必要が頻繁に発生します。通常、これはラッパー
を使用して実現されます。 text-align を使用: 中央;
- のインラインブロックスタイル。ただし、作成者は親
- の左揃えを維持しながら、要素を使用するため、で囲む必要がなくなります。これは、複雑なレイアウトで順序なしリストを整列させるための簡単で信頼性の高いソリューションです。
なしで順序なしリストを中央に配置するという課題に直面することがよくあります。
これを実現するには、型破りな方法を採用する必要があります。解決策の 1 つは、display: table を活用することです。財産。
- を変換します。テーブルのような構造に変換し、リスト項目がテーブルのセルのように動作できるようにします。
- のマージンを 0 auto; に設定すると、要素は親コンテナ内で中央に配置されます。
このソリューションのコード スニペットは次のとおりです:
<code class="CSS">ul {
display: table;
margin: 0 auto;
}</code>
HTML 例:
<code class="HTML"><html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html></code>
このメソッドは、
を効果的に中央に配置します。以上が親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。