CSS center align in label field

Question

I'm trying to display something like this one:

* Please treat the blue line and black line as the border

In which the image description text should be horizontal center in the remain space, however I can't figure out what css I should apply.

Here is my fiddle: https://jsfiddle.net/65ky0zLg/

HTML:
<div>
  <img src="http://lh3.googleusercontent.com/mjejVTJKT4ABNKq2HGlkDs36f-QvzI2hKFER098vBIgiAoZ2H-SN5QPvFaZEVDZRxfujrS6pszZ_J-_di2F57w0IFE3KAciDwGAh-9RcCA=s660" style="width: 20%; padding: 2% 2% 0% 2%" alt/>
  <label class="lbl">Martin Luther King, Jr. Day 2015</label>
</div>

CSS:
.lbl {
  font-size: larger;
}

Answer 1

Remove float:left and just use verticle align with the image and that's it. Try below:

<div>
  <img src="http://lh3.googleusercontent.com/mjejVTJKT4ABNKq2HGlkDs36f-QvzI2hKFER098vBIgiAoZ2H-SN5QPvFaZEVDZRxfujrS6pszZ_J-_di2F57w0IFE3KAciDwGAh-9RcCA=s660" style="width: 20%; vertical-align:middle" alt/>
  <label class="lbl">Martin Luther King, Jr. Day 2015</label>
</div>

EDIT: Above will vertically align the text. In case you want to align it horizontally, do the below:

<img src="http://lh3.googleusercontent.com/mjejVTJKT4ABNKq2HGlkDs36f-QvzI2hKFER098vBIgiAoZ2H-SN5QPvFaZEVDZRxfujrS6pszZ_J-_di2F57w0IFE3KAciDwGAh-9RcCA=s660" style="width: 20%;" alt/>
<label class="lbl">Martin Luther King, Jr. Day 2015</label>

And use the css below:

.lbl {
    font-size: larger;
    position:absolute;
    text-align:center;
    bottom:0;
    width:100%;
    left:10%;
  }

Working Plnkr : Plnkr