Question

I have a div that contains an image and a p tag (seen below). I want to align the image in the middle of the div vertically depending on how many lines the paragraph is. Vertical-align doesn’t work. I am using JavaScript right now to figure out how much to add to margin-top, but would rather use CSS. Any ideas?

<div>
    <img>
    <p>Multi-line</p>
</div>

Answer 1

Try setting the line-height attribute of the p element to the height of the image, eg:

div p {
  line-height: 18px;
}

Edit: Just realised I misread the question and missed the fact the p would be multi-line. One option to try is removing the img element altogether and setting it as the background-image of the p instead, with a background-position of left, center. Something like:

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}