親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-31 08:17:30

オリジナル

666 人が閲覧しました

How to Center an Unordered List Without a Parent Div?

左揃えのリスト項目を含む順序なしリストを中央揃えにする

Web デザインでは、リスト項目の左揃えを維持しながら順序なしリストを中央揃えにする必要が頻繁に発生します。通常、これはラッパー

を使用して実現されます。 text-align を使用: 中央;

なしで順序なしリストを中央に配置するという課題に直面することがよくあります。

これを実現するには、型破りな方法を採用する必要があります。解決策の 1 つは、display: table を活用することです。財産。

このソリューションのコードスニペットは次のとおりです:

<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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

親 Div を持たずに順序なしリストを中央に配置するにはどうすればよいですか?

左揃えのリスト項目を含む順序なしリストを中央揃えにする