このガイドでは、CSS を使用して水平方向と垂直方向の配置を行う手順を説明します。
CSSを使用して水平方向と垂直方向に配置するにはどうすればよいですか?
開発者は、「水平」と「垂直」の配置を使用して、Web ページ上の要素をより組織的に配置および配置します。これらは、要素やコンテンツの位置合わせ、ボタンやアイコンの配置などに役立ちます。より深く理解するには、以下の例に従ってください。
水平方向の配置
CSS では、text-align プロパティは、親要素内のテキストを水平方向に整列させるために使用されます。より深く理解するには、以下のコード スニペットを参照してください。
< 体 >
< ディビジョン クラス = 'アカウント' >
< ディビジョン クラス = 「左揃え」 > Linuxhint は左揃えです < / ディビジョン >
< ディビジョン クラス = 「中央揃え」 > Linuxhint は中央揃えです < / ディビジョン >
< ディビジョン クラス = 「右揃え」 > Linuxhint は右揃えです < / ディビジョン >
< / ディビジョン >
< / 体 >
上記のコード スニペットでは次のようになります。
- まずは親「 ディビジョン ” 要素は、値が ” のクラス属性で使用されます。 アカウント ”。
- 次に、3 つの子要素が作成され、各 div に class 属性が割り当てられています。
- 最終的に、「leftAlign」、「centerAlign」、および「rightAlign」の値がクラスに提供されます。
ここで、次の CSS プロパティを「」に挿入します。 <スタイル> ' 鬼ごっこ：
<スタイル >
.leftAlign {
画面 : インラインブロック ;
幅 : 30% ;
パディング : 20ピクセル ;
背景色 : フォレストグリーン ;
テキスト整列 : 左 ;
}
.centerAlign {
画面 : インラインブロック ;
幅 : 30% ;
背景色 : 赤 ;
パディング : 20ピクセル ;
テキスト整列 : 中心 ;
}
.rightAlign {
画面 : インラインブロック ;
幅 : 30% ;
背景色 : ティール ;
パディング : 20ピクセル ;
テキスト整列 : 右 ;
}
>
上記のコード ブロックでは次のようになります。
- まず、3 つのクラスすべてを個別に選択し、CSS プロパティを適用します。 画面 ”、” 幅 ”、” 背景色 ' と ' パディング ' 彼らへ。これらのプロパティは、視覚化の目的を強化するために利用されます。
- 次に、「」の値 左 ”、” 中心 ' と ' 右 ” に提供されます。 テキスト整列 「」プロパティを「」に 左揃え ”、” 中央揃え '、 と ' 右揃え 」のクラスをそれぞれ設定します。
コンパイル プロセス後の HTML 要素は次のようになります。
ブラウザーの上のスナップショットは、要素が左、中央、右の位置で水平方向に整列していることを示しています。
垂直方向の配置
CSS 」 垂直整列 ” プロパティは、選択した要素を「 y軸 ” を親要素内に追加します。 「vertical-align」プロパティの可能な値は次のとおりです。 ベースライン ”、” サブ ”、” 素晴らしい ”、” 上 ”、” テキストトップ ”、” 真ん中 ”、” 下 '、 と ' テキスト下部 ”。ただし、開発者は Web ページのデザインを作成する際に、主に「top」、「middle」、「bottom」の値を使用します。選択した HTML 要素を上部に配置するには、以下のコード スニペットにアクセスしてください。
< ディビジョン クラス = 'カウント' >< 画像 送信元 = 'ヒウンスプラッシュ.jpg' 幅 = 「200ピクセル」 身長 = 「200ピクセル」 >
< スパン クラス = 「キャプション上揃え」 > このテキストは画像の横に垂直方向に上に配置されます < / スパン >
< / ディビジョン >
上記のコード スニペットでは次のようになります。
- まず、親を作成します。 ディビジョン ” 要素を作成し、値「」を割り当てます。 カウント ”へ” クラス ' 属性。
- 親コンテナ内で、「 <画像> ” タグを作成し、画像のパスを値として “ 送信元 ' 属性。
- さらに、「」の値を提供します。 200ピクセル ” の両方に” 幅 ' と ' 身長 「」の属性 <画像> ' 鬼ごっこ。
- 次に「」を活用します。 <スパン> ” タグを付けて、” のクラスを指定します。 キャプション上揃え ”。最後にダミーデータを与えます。
ここで、CSS プロパティを追加して HTML 要素のスタイルを設定します。
。カウント {幅 : フィットコンテンツ ;
画面 : ブロック ;
左マージン : 100ピクセル ;
パディング : 10ピクセル ;
国境 : 2ピクセル 個体 赤 ;
}
.captionTopAlign {
垂直
上記のコード ブロックでは次のようになります。
- まず、親「」を選択します。 カウント ” クラスを作成し、CSS に「fit-content」、「block」、「100px」、「10px」、「2px 単色赤」の値を指定します。 幅 ”、” 画面 ”、” 左マージン ”、” パディング ' と ' 国境 ' プロパティ。これらのプロパティは、親要素のスタイルを設定するために使用されます。
- 次に「」を選択します。 キャプション上揃え ” クラスを作成し、” の値を提供します 上 「CSSへ」 垂直整列 ' 財産。これにより、HTML 要素が先頭位置に配置されます。
上記のコード行を実行すると、Web ページは次のように表示されます。
上のスナップショットは、選択した HTML 要素が上揃えになったことを示しています。同様に、要素を中央、下方向などに整列させることができます。
結論
水平方向と垂直方向の配置については、「 テキスト整列 ' と ' 垂直整列 」のCSSプロパティがそれぞれ利用されます。 「text-align」プロパティでは、「」の値が許可されます。 左 ”、” 右 ”、” 中心 ' と ' 正当化する ”。一方、「vertical-align」プロパティの可能な値は次のとおりです。 ベースライン ”、” サブ ”、” 素晴らしい ”、” 上 ”、” テキストトップ ”、” 真ん中 ”、” 下 '、 と ' テキスト下部 ”。水平方向と垂直方向の配置は、きれいでプロフェッショナルな Web デザインを作成するのに役立ちます。