CSSの配置方法とは何ですか-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの配置方法とは何ですか

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Nov 18, 2021 pm 02:30 PM

css

方法: 1. 「text-align:center」スタイルを使用して、水平方向の中央揃えを実現します。 2. 「line-height: line height;」スタイルを使用して、垂直方向の中央揃えを実現します。 3. 「align-items:center;justify-content:center」スタイルを使用して、水平方向と垂直方向の中央揃えを実現します。

CSSの配置方法とは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css の配置方法とは何ですか

1. 水平方向の中央揃え

インライン要素の水平方向のセンタリング

設定した要素がテキストやピクチャなどのインライン要素の場合、親要素に text-align:center を設定して水平方向を実現します。インライン要素の中央揃え、子要素の水平方向の中央揃え。要素の表示が inline-block に設定され、子要素がインライン要素になります

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

ログイン後にコピー

ブロック要素の水平方向の中央揃え (固定) width)

設定される要素が固定幅のブロックレベル要素の場合、text-align: center は機能しません。「左右のマージン」の値を「自動」に設定することでセンタリングを実現できます。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

ログイン後にコピー

ブロック要素の水平方向の中央揃え (幅不定)

実際の作業では、ブロック要素を " "ブロックする必要がある場合があります。 Web ページのページネーションナビゲーションなど、「幅が可変のレベル要素」は中央に設定されます。ページネーションの数は不確実であるため、幅を設定することで柔軟性を制限することはできません。

これを実現するには、可変幅のブロックレベル要素に text-align:center を直接設定するか、親要素に text-align:center を追加して中央揃え効果を実現します。

可変幅ブロックレベル要素の幅が1行に満たない場合、表示をインライン型またはインラインブロック(インライン要素表示またはインラインブロック要素に設定)に設定できます。

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>

ログイン後にコピー

2. 垂直方向のセンタリング

は水平方向のセンタリングと同じですここでは垂直方向のセンタリングについて説明しますまず、親要素がボックスコンテナであることと、親要素がボックスコンテナであることの 2 つの条件を設定します高さが設定されています。

子要素はインライン要素の場合、高さはそのコンテンツによってサポートされます。

この場合、親要素の行の高さをその要素に設定する必要があります。子要素を垂直方向に中央揃えにする高さ

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

ログイン後にコピー

3. 水平方向と垂直方向の中央揃え##css タグで、表示属性を flex に設定してフレックスレイアウトを実装し、 align-items 属性を center (水平方向の中央揃え) に設定し、justify-content 属性を center (垂直方向の中央揃え) に設定します。水平方向と垂直方向の中央に配置するように設定できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv">
        <span>测试</span>
</div>
<style type="text/css">
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>
</body>
</html>

ログイン後にコピー

プログラミング関連の知識については、

プログラミングビデオ

をご覧ください。！

以上がCSSの配置方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7737

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。