I am looking to display an image alongside some text, where the number of text lines can vary. It could be one, two, or three lines of text. Here's how it should be handled:
If there is only one line of text:
The image should be centered with the text
If there are two lines of text:
The image should be centered between the two lines
If there are three lines of text:
The image should be centered, possibly aligning with the middle line
Important: The text container must have a specified height requirement.
Here is the CSS I have so far:
.icon-several-lines {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
.info {
display: inline-block;
vertical-align: middle;
height: 120px;
}
HTML:
<div class="icon-several-lines">
<img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
<span class="info">
<p><span>test test test test test test</span></p>
<p><span>test test test test test test</span></p>
<p><span>test test test test test test</span></p>
</span>
</div>
<div class="icon-several-lines">
<img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
<span class="info">
<p><span>test test test test test test</span></p>
<p><span>test test test test test test</span></p>
</span>
</div>
<div class="icon-several-lines">
<img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
<span class="info">
<p><span>test test test test test test</span></p>
</span>
</div>
View the fiddle here: http://jsfiddle.net/2bNsC/726/
Thank you.