この記事では、CSS を使用した実際の例を使用して、div の右揃えを説明します。
CSSを使用してDivを右揃えにする方法は?
開発者は、Web サイトをより魅力的にする方法で、各 div 要素または画像を右揃えにすることができます。 div 要素は柔軟性が高いため、ページ セクションの定義、列の作成、関連コンテンツのセットのラッピングなど、Web ページ上でさまざまな方法で利用できます。
div を右揃えにするには、以下の方法に従います。
方法 1: 「float」プロパティを使用する
HTML ファイルで div を作成し、それに「クラス」を割り当てます。 右揃え ”。このクラスと div はこの記事全体で使用されます。
< ディビジョン クラス = 「右揃え」 >
< p > これは一部のコンテンツです。 < / p >
< / ディビジョン >
次に、その div クラスを選択します。 右揃え 」を選択し、CSS プロパティを割り当てます。これらのプロパティは、視覚化を改善するために利用されます。
.右揃え {
フロート: 右;
パディング: 10px;
バックグラウンド- 色 ： ホトピンク;
}
上記のコードでは、「 浮く ”プロパティが右側に設定されます。 Web ページ上で div を右方向にフローティングまたは移動します。パディングと背景色のプロパティは「」に設定されます。 10ピクセル ' と ' ホトピンク ' それぞれ。
上記のコード スニペットをコンパイルすると、Web ページは次のようになります。
上記の出力は、div が正しい方向に移動していることを確認します。
方法 2: 「right」プロパティを使用する
CSS で div クラスを選択し、「 右 これにより、選択した div の右側からの距離が 0 に等しくなります。次に、「」を設定します。 位置 「プロパティを」に 絶対 」を選択してdiv位置を固定します。最後に、視覚化を改善するためにいくつかのスタイル プロパティを適用します。
.右揃え{
右： 0 ;
位置: 絶対;
パディング: 10px;
バックグラウンド- 色 ：中紫色。
}
コードを実行すると、Web ページは次のようになります。
出力には、div が右揃えになっていることが示されています。
方法 3: フレックス レイアウトを使用する
Flex は最も効率的な方法であり、ウィンドウのサイズ変更中にレイアウトが維持されます。 CSS を使用して div を右揃えにすることができます。 フレックスレイアウト ' プロパティ。 Flex レイアウトには、さまざまな目的のための多くのプロパティが含まれています。
HTML ファイルで親 div を作成し、その中に 2 つの兄弟 div を作成します。また、各 div に一意のクラスを割り当てます。
< ディビジョン クラス = 「右揃え」 >< ディビジョン クラス = 「左揃え」 >
< p >これはもう少しあります コンテンツ .< / p >
< / ディビジョン >
< ディビジョン クラス = 「右揃え」 >
< h1 > Linuxhint からこんにちは < / h1 >
< / ディビジョン >
< / ディビジョン >
今、「」の中で <スタイル> ” タグに次の CSS プロパティを追加します。
.右揃え {ディスプレイ: フレックス;
正当化する- コンテンツ : 間のスペース;
}
.右揃え {
align-self: フレックスエンド;
パディング: 10px;
バックグラウンド- 色 ：中紫色。
}
上記のコードでは、
- 割当 ' フレックス ” と “space-between” の値を “ 画面 ' と ' コンテンツの正当化 」プロパティをそれぞれ。これらのプロパティは div をフレックスにし、子 div の間に等間隔を置きます。
- ” 整列自己 「プロパティは「」に設定されています フレックスエンド 」と入力すると、コンテナの右側に配置されます。
上記のコードを実行すると、Web ページは次のようになります。
出力は、flex レイアウトを使用して div が右揃えであることを示しています。
方法 4: グリッド レイアウトを使用する
グリッド レイアウトを利用して、div を右揃えにすることもできます。 HTML コードの構造は変わりません。
.右揃え {表示: グリッド;
グリッドテンプレート列: 繰り返し ( 2 、1階 ) ;
}
.右揃え {
グリッド列- 始める : 2 ;
パディング: 10px;
バックグラウンド- 色 : ティール;
}
コードの説明は以下のとおりです。
- まず、親の div クラスを選択します。 .右揃え ” を設定し、” 画面 「プロパティを」に グリッド ”。
- 次に、「」を使用して同じサイズの 2 つの列を作成します。 グリッドテンプレート列 ' に設定 ' リピート(2、1fr) ”。
- 最後に、子 div クラスを選択します。 .右揃え 」を選択し、「 グリッド列の開始 このプロパティは要素を 2 列目、つまり右側から開始します。
上記のコードを実行すると、Web ページは次のようになります。
出力は、div が「」を使用して右揃えになったことを示しています。 グリッド ” レイアウトのプロパティ。
結論
div を正しい方向に揃えるには、「」を使用します。 浮く ”、” 右 ”、” フレックスレイアウト '、 と ' グリッドレイアウト ' プロパティ。 ” 浮く ” プロパティは、値” を割り当てることで右に設定されます。 0ピクセル ”。のために ' フレックス ” プロパティで、ディスプレイをフレックスに設定し、” 整列自己 「プロパティを」に フレックスエンド ”。グリッド プロパティを使用して、同じサイズの列を 2 つ作成し、子 div を 2 番目の列から開始します。