How to align text within div - html

Question

I have 2 simple intertwining issues related to my Unordered List which have caused me hours of headache. Each li within the ul contains 1 image, and 3 divs. The divs are titlebox, locationbox, and pricebox. There is text inside each of these divs. A JsFiddle demo is below along with a screenshot of what I need.
The li looks like:
<li>
<center><img src="LINK_TO_PHOTO"></center>
<div class="titlebox">Circa 1930 on the River</div>
<div class="locationbox">Lawrencetown</div>
<div class="pricebox">Offered at $249,000</div>
</li>
My issues are:
I want the titlebox (and the text within it) to stretch the exact width as the image above it, so there's no overhang. This means the text will have to get bigger if the user's monitor is larger, because the image width is a % and is responsive, so the text-size must be responsive as well.
I also need the pricebox (bottom div) to sit at the bottom of the green box. And I want the location box to sit equally between the titlebox above, and the price box below.
The 3rd box has a title of 2 lines, but I still need the location "Medford" to be aligned with those to the left. So I can't use a margin-top: % here because it would push the third box's location/price down too far (since the 2 lined title).
Here is a screenshot of what I need. Screenshot
See how I need the title and price to stretch the same width as the image?
And here is what it currently looks like: jsFiddle
Any help whatsoever would be great! Thank you so much

Answer 1

I use the following to horizontally center block and inline elements...
CSS Class
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
Note you will in some circumstances need to apply the CSS class to the parent element instead of directly to the element itself. Additionally if the width of the parent element is collapsed (e.g. using a float) you'll have to center that element as well by moving the class to the parent element's parent.

Answer 2

I am not sure this is the best way to solve your price spacing issue, but since you know there are 3 divs and one image, you could simply divide the height of a parenting div. Something like this:
#pictureBox
{
margin-left: auto;
margin-right: auto;
height: 50%;
}
#titleBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 25%;
}
#locationBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 15%;
}
#priceBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 10%;
}
I am sure you will have to play around with the percentages until you find a reasonable space you like, but I think that would distribute the space properly.

Answer 3

Here's what I came up with given some of the things you were looking for: http://jsfiddle.net/00gdax7m/8/
.titlebox {
width: 80%;
display: inline-block;
font-size: 17px;
font-size: 1.9vw;
margin-left: 10%;
margin-right: 10%;
line-height: 100%;
font-family: Garamond;
color: #002000;
text-align: center;
height: 20%;
}
.locationbox {
width: 100%;
display: inline-block;
font-size: 25px;
line-height: 100%;
font-family: Garamond;
color: #002000;
font-style: italic;
text-align: center;
height:20%;
}
.pricebox {
position:relative;
bottom:0;
width: 100%;
font-size: 32px;
line-height: 100%;
text-align: center;
font-family: Garamond;
color: #002000;
height: 20%;
}
.houseImage
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
height: 36%;
}
Key notes:
I found an answer here which explains the use VW units which helps with your font sizing. The answer says to be careful of browser compatibility though. Pure CSS to make font-size responsive based on dynamic amount of characters
As another user mentioned. Make sure you are using CSS correctly to center.
To make your elements evenly space adjust the height % of your divs within the li (BlueBaroo answered similarly while I was typing)