HTML の画像の横にテキストを配置
-
floatCSS プロパティを使用して、HTML の画像の横にテキストを配置する -
display: inline-blockとvertical-align: topを使用して、HTML の画像の横にテキストを配置する
この記事では、HTML と CSS を使用して画像の横にテキストを配置する方法について説明します。
float CSS プロパティを使用して、HTML の画像の横にテキストを配置する
float CSS プロパティを使用して、要素をフロートさせる方法を定義できます。要素は右または左に浮くことができます。他のいくつかのオプションは、要素がフロートしないことを意味する none と、親の動作を示す inherit です。float プロパティを使用して、要素の配置とフォーマットを指定します。このプロパティを使用して、画像の横にテキストを配置することもできます。
画像とテキストの両方のコンテンツを div でラップすることで、次のスタイルを簡単に実現できます。HTML は次のように構成する必要があります。
<div>
<div>
<img src="url" />
</div>
<div>
Text content goes here
</div>
</div>
HTML が構造化されたので、CSS をインライン、内部、または外部として追加できます。この例では、インライン CSS を使用してスタイルを実装します。まず、画像をラップする div の float プロパティを left に設定します。画像ソースとして URL https://loremflickr.com/320/240 を使用します。次に、任意のテキストを記述し、別の div でラップします。
コード例：
<div>
<div style="float: left">
<img src="https://loremflickr.com/320/240" />
</div>
<div>
Text content goes here
</div>
</div>
ここでは、プロパティ float: left が画像のラッパーに与えられています。float: left プロパティは画像を左側に配置し、テキストコンテンツをラップする別のラッパーが画像のすぐ横に配置されます。このようにして、CSS の float プロパティを使用して、画像の横にテキストを配置できます。
display: inline-block と vertical-align: top を使用して、HTML の画像の横にテキストを配置する
display および vertical-align プロパティを使用して、HTML の画像の横にテキストを配置できます。display は、要素が HTML でどのように表示されるかを定義します。要素の display プロパティを inline、inline-block、block などに設定できます。display を inline-block に割り当てると、要素はインライン要素になりますが、それでも可能です。height および width プロパティを設定します。したがって、画像の横にテキストを配置できるようになります。vertical-align プロパティは、要素の垂直方向の配置を定義します。値 top を使用すると、要素は線上で最も高い要素の一番上に配置されます。
ここでも、コードを次のように構成できます。
<div>
<img src="" alt="img"/>
</div>
<div>
<p>
Text Here,
</p>
</div>
たとえば、画像ラッパーdiv の場合、display プロパティを inline-block に設定し、vertical-align プロパティを top に設定します。ラッパーに関しては、テキストの div が display プロパティを inline-block に設定します。
コード例：
<div style="display:inline-block;vertical-align:top;">
<img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
<p>
Here goes the text content.
</p>
</div>
ここで、プロパティ display: inline-block は、画像をラップしているラッパーのプロパティをインラインブロックプロパティに設定します。inline-block オプションは、要素の横に改行を追加しません。したがって、要素は互いに隣り合って整列します。また、テキストラッパーを display: inline-block プロパティでラップします。前のラッパーと同様に、画像のすぐ横にテキストコンテンツが配置されます。
