html - CSS 在标签字段中居中对齐

Question

我正在尝试显示类似这样的内容:

* 请将蓝线和黑线视为边框

其中图像描述文本应该在剩余空间中水平居中，但是我不知道应该应用什么 css。

这是我的 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

移除 float:left 并仅使用与图像对齐的垂直线，仅此而已。尝试以下:

<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>

编辑:上面将垂直对齐文本。如果您想水平对齐，请执行以下操作:

<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>

并使用下面的 css:

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

工作 Plnkr : Plnkr