How to align text within div

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

http://jsfiddle.net/00gdax7m/7/ here is a start. What @Marc said hits on point on the head. The other issue is text. Really you will need set heights for your text divs. But when you do that, the 2 lined cannot be equally spaced vertically as the 1 lined unless you have different CSS in the 2 compared to the 1. If you want to use images with different ratios you will need to use the images as background images with `background-size:cover` — Leeish, Sep 24 '14 at 22:39
I'm dealing with photos with different aspect ratios and so cannot pick a common one, unfortunately. — Nova, Sep 24 '14 at 23:18

score 0 · Answer 1 · answered Sep 24 '14 at 22:32

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.

score 0 · Answer 2 · answered Sep 24 '14 at 22:45

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.

score 0 · Answer 3 · edited May 23 '17 at 12:29

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)

How to align text within div

3 Answers3