简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

Susan Sarandon
リリース： 2024-10-30 12:33:25
オリジナル
931 人が閲覧しました

How to Center an Unordered List Without a Parent Div in CSS?

親 DIV のない順序なしリストを中央揃えにする方法

CSS で、左を維持しながら順序なしリスト (

    ) を中央揃えにする-aligned リスト項目は、親 div を使用しないと困難になる可能性があります。この効果を実現する方法は次のとおりです。

    親 div を持つ提供されたコード スニペットでは、div で text-align: center を使用し、ul で display: inline-block を使用してリストを中央に配置します。ただし、この方法には親 div ラッパーが必要です。

    親 div を使用せずに順序なしリストを中央に配置するには、margin や text-align などの CSS プロパティを効果的に使用できません。

    解決策は、

      を設定することです。テーブルのように動作するには、display: table を使用します。これにより、行がリスト項目 (
    • ) によって定義されるテーブルのような構造が作成されます。
        で 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 サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：Python で PNG 画像を CSS データ URI の Base-64 エンコーディングに変換する方法 次の記事：コンテナ内の Div の左右のスムーズな CSS アニメーションを作成するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1711
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1874
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1586
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1504
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1541
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！