CODEWITHSUNDEEP
htmlcss
andrew.z
andrew.z

Reputation: 1059

HTML: layout text and image together

I need to have text and image so that they are vertically aligned together. Specifically image should be vertically positioned at the middle of the text. What's the best way to do that?

One constraint: the content of my <img> tag is retrieved from external source and it would be great if I could leave <img> tag unchanged (no attributes added).

Sample:

<div>Some text <img src="http://somewhere.com/someimage.png"/></div>

Upvotes: 0

Views: 1370

Answers (2)

albert
albert

Reputation: 8153

div{background:url("http://somewhere.com/someimage.png") 50% 50% no-repeat; line-height:1.5em; text-align:center}

should do it. depending on font-size

Upvotes: 0

user527892
user527892

Reputation:

img { vertical-align: middle; }

Might be best to add a class or id to the img or surrounding div though as this will affect all img tags on the page

Upvotes: 1

Related Questions