CSS align text and img

Question

I am not sure how to describe it - I want to make comments looking like facebook ones:

But I am not sure how to align text like this - any suggestions?

You can do this with overflow:hidden. The solution can be found here: http://pmob.co.uk/pob/caption-clear.htm — Wim Mertens, Jun 30 '16 at 22:49

score 2 · Answer 1 · answered Jun 30 '16 at 22:56

You can use vertical-align: top to make the text aligned at the top with the image.

HTML:

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

CSS:

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

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

Vertically align text next to an image? This is how you align text next to an image

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

edited May 23 '17 at 12:32

Community

answered Jun 30 '16 at 22:44

Alastair

score 1 · Accepted Answer · answered Jun 30 '16 at 22:56

1

You can do it like this:

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

answered Jun 30 '16 at 22:56

3 Answers3