html - CSS を使用して画像の横にあるテキストを水平方向に揃える方法

Question

添付のスクリーンショットのような CSS を使用して、画像の横にあるテキストを垂直方向に揃えるにはどうすればよいですか。

例: この投稿にスクレンショットを添付しました。

Answer 1

画像を左に浮かせoverflow:hiddenてテキストを配置し、画像の下に入らないようにします。

Answer 2

<p><img src="https://www.google.com/images/srpr/logo3w.png" style="float:left;padding-right:12px" width="280" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<br style="clear:both" />
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

これをテストします。

Answer 3

画像にこの CSS スタイルを使用します

clear:both

Answer 4

通常、単純なフロートでうまくいきます。

img {
    float: left;
}

p {
    float: left;
}

これにより、テキストが画像に適応します。テキストが画像の高さよりも長い場合、画像の下に折り返されます。