CSS で画像を右揃え

1. CSS で float および clear プロパティを使用して画像を 1 行で右に揃える
2. CSS で display および margin-left プロパティを使用して画像を 1 行で右に揃える

この記事では、CSS で画像を右揃えにするいくつかの方法について説明します。

CSS で float および clear プロパティを使用して画像を 1 行で右に揃える

float プロパティを使用して、CSS で要素の浮動位置を指定できます。

たとえば、HTML で画像を挿入し、画像の下に段落を書き込むと、画像を段落の左または右に浮かせることができます。このようにして、画像の横にテキストを表示させることができます。

float プロパティを right に設定して、画像を CSS の段落の右側に揃えることができます。ただし、画像の下の段落をプッシュする必要がある場合は、clear プロパティが役立ちます。

プロパティは、浮動要素の下の要素の流れを定義します。clear プロパティの right オプションを使用すると、要素は右のフロート画像の下にプッシュされます。

したがって、画像を右揃えにして、次の行から段落を開始できます。画像の左側に空白が残ります。

たとえば、HTML の img タグを使用して画像を挿入します。img タグの横に p タグを書き、その中にテキストを入力します。

CSS で img タグを選択し、float プロパティを適用します。オプション right を float プロパティに設定します。次に、p タグを選択し、clear プロパティを right に設定します。

ここでは、画像は Web ページの右側に配置されます。画像の横にテキストはありません。

clear プロパティを使用しなかった場合、テキストは画像の左側に表示されます。clear プロパティを使用して、画像の下にテキストをプッシュしました。

clear プロパティにオプション both を設定することもできます。次の要素を左右のフロート要素の下にプッシュします。

サンプルコード：

<img src="/img/DelftStack/logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nihil, vitae placeat molestias inventore, numquam eveniet illo optio, sint excepturi nam? Ut dolor ratione aut tenetur, a aliquid natus tempore!
</p>

img{
 float:right;
}

p{
 clear:right;
}

CSS で display および margin-left プロパティを使用して画像を 1 行で右に揃える

この方法では、画像を右揃えにしてテキストを別の行にプッシュする別の方法について説明します。

display および margin-left プロパティを使用して目標を達成できます。margin-left プロパティを使用して、画像の左側にマージンを設定し、Web ページの右側に画像をプッシュすることができます。

自動オプションでそれを達成することができます。画像をブロック要素として設定することで、テキストを次の行に強制できます。display プロパティでそれを行うことができます。

この例では、最初のメソッドで使用された HTML 構造を使用します。たとえば、img タグを選択し、margin-left プロパティを auto に設定します。次に、ブロックオプションを表示プロパティに適用します。

ここで、auto オプションは画像の左マージンを設定します。画像はそのサイズに応じてスペースを取ります。

次に、ブラウザは残りのスペースを計算し、そのスペースを左マージンとして設定します。その結果、画像は右揃えになります。

display プロパティを block に設定すると、ブロックレベルの要素が作成されます。これは、画像がライン全体を占めることを意味します。

画像の次の要素は次の行にプッシュされます。したがって、右側の display プロパティと margin-left プロパティを使用して、画像を整列し、テキストを次の行に移動できます。

サンプルコード：

img {
 margin-left: auto;
 display: block;
}