CODEWITHSUNDEEP
htmlcsscenter
JYeh
JYeh

Reputation: 4333

vertically center text after a left floated image

<img style="float:left" src="image.jpg"> <center>text</center>
<hr style="clear:both">

What I want to achieve with the above code is have an image floated to the left, text that is vertically centered (instead of placed at the top like it currently is) and horizontally centered, and then after the image and text there is a horizontal bar to divide both the image and text from the rest of my stuff. I'm not sure how to vertically center the text without doing funky stuff like a table with a single row and column.

Upvotes: 2

Views: 4208

Answers (2)

Uttara
Uttara

Reputation: 2532

try out this example

if you have a fixed height for the area in which your image lies then you can give

line-height = the height of the image to place the text vertically center

EDIT : another way

Upvotes: 2

Prashobh
Prashobh

Reputation: 9552

<div>
<img style="float:left" src="image.jpg">text
</div>

img
{
  vertical-align:middle;
}

Upvotes: 1

Related Questions