Space lines vertically - font-size

Question

I have three lines of text I want to space evenly near a box of height=100px; (an image actually)
Is there anything I can do that will do this automagically? Or do I have to calculate line heights and change the paddings margins line heights and font sizes?

Answer 1

My solution involves the height of the element containing your lines of text. Since your block is 100px, you want the block containing the text to also be 100px. It could also be three separate blocks that add up to 100px.
Here are two separate solutions that both work.
HTML:
<div class="box1">box1</div>
<p class="p1">This is line 1.<br>
This is line 2.<br>
This is line 3.</p>
CSS:
.p1 {
margin: 0;
padding: 0;
height: 100px;
line-height: 33px;
background-color: silver;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
HTML:
<div class="box2">box2</div>
<p class="p2">This is line 1.</p>
<p class="p3">This is line 2.</p>
<p class="p4">This is line 3.</p>
CSS:
.p2, .p3, .p4 {
margin: 0;
padding: 0;
height: 33.3px;
line-height: 33.3px;
background-color: silver;
}
.box2 {
background-color: green;
width: 100px;
height: 100px;
float: left;
}
Demo at CodePen
In the second solution (separate blocks), you can leave out the line-height and the first line of text will align with the top of the box with the other lines spaced evenly below it.

Answer 2

You could apply a line-height that is one-third the image height.
img {
height: 100px;
vertical-align: middle;
}
.text {
vertical-align: middle;
display: inline-block;
max-width: 300px;
line-height: 33.33px;
}
http://jsfiddle.net/myajouri/Nk5Hj/