CSS对齐文本和img

Question

我不确定如何描述它 - 我想发表评论看起来像facebook的评论：

但我不确定如何对齐这样的文字 - 有什么建议吗？

Answer 1

您可以使用vertical-align: top将文字与图片对齐。

jsFiddle

HTML：

<img src="image.png">
<div class="text">Whatever text you want here.</div>

CSS：

.text {
  display: inline-block;
  vertical-align: top;
  width: 300px;
}

Answer 2

Vertically align text next to an image? 这是对齐图像旁边的文本的方法

<div>
<img style="vertical-align:middle" src="<imageUrl>">
<span style="">Your text</span>
</div>

Answer 3

你可以这样做：

div{width: 200px;}
img{vertical-align: top;}
img, div{display: inline-block}

请参阅小提琴https://jsfiddle.net/cvnrwo13/2/