Vertically center align image and multiple text blocks

Question

I'm trying to float two elements of different height, with the shorter one being middle centered.

If I use inline-block instead of float the vertical centering works correctly, but the 'middle' div doesn't stretch to fit.

float example: http://jsfiddle.net/jonofan/r3pejgud/3/

inline-block: http://jsfiddle.net/jonofan/87kwpuxa/

Also interested to hear if people think should be going about this layout a different way entirely.

EDIT: I don't see this to be a duplicate of this question because my current code doesn't use table display. It just so happens that 'use table display' is the best answer in this case.

.header {
  width: 600px;
  border: 1px solid black;
  display: inline-block;
}
.header img {
  width: 50px;
  float: left;
}
.middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid gray;
  height: 20px;
  overflow: hidden;
}
.middle .itemheading {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.8em;
}
.middle .itemdate {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class='header'>
  <img src='http://i.imgur.com/J2HToiP.jpg' />
  <div class='middle'>
    <span class='itemheading'>Heading Text</span>
    <span class='itemdate'>Wednesday 01 July 2015</span>
  </div>
</div>

Do you want to keep this format or you would open to a different one? — Gacci, Oct 28 '15 at 20:02
For your second link, just enforce a width that works, taking border into account. [Here's an example](http://jsfiddle.net/87kwpuxa/1/) — shennan, Oct 28 '15 at 20:07
@DevlshOne that width won't work, as there is an image of 50px adjacent. — shennan, Oct 28 '15 at 20:09
Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — DanMan, Oct 28 '15 at 20:09
@shennan I prefer not to use a fixed width inside the container in this case. I've decided this is much easier done with a table display, as per marked answer. — jonofan, Oct 28 '15 at 21:39

score 2 · Accepted Answer · answered Oct 28 '15 at 20:15

Not perfect but you don't have to resort to absolute positioning. Use display: table-cell; instead.

Not sure how the border for .middle is supposed to work.

<div class='header'>
    <div class="img-wrap">
        <img src='http://i.imgur.com/J2HToiP.jpg' />
    </div>
    <div class='middle'>
        <span class='itemheading'>Heading Text</span>
        <span class='itemdate'>Wednesday 01 July 2015</span>
    </div>
</div>

.header {
    width: 600px;
    border: 1px solid black;
}
.header img {    
    width: 50px;
}
.header .img-wrap {
    display: table-cell;
    vertical-align: middle;
}
.header .middle {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid gray;    
}
.itemdate {
    float: right;
}

http://jsfiddle.net/87kwpuxa/2/

actually @hungerstar this still leaves me with the problem of positioning `.itemdate` at the bottom of `.middle`. If you increase the `font-size` of `.itemheading` you can see the issue. [fiddle example](http://jsfiddle.net/jonofan/87kwpuxa/3/) — jonofan, Oct 28 '15 at 23:06

Vertically center align image and multiple text blocks

1 Answers1