CSS中心在标签字段中对齐

Question

我正试图展示类似这样的东西：

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

图像描述文字应该在剩余空间中水平居中，但是我无法弄清楚应该应用什么css。

这是我的小提琴：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并使用Verticle与图像对齐，就是这样。请尝试以下：

<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

Answer 2

您可以通过在此处设置标签inline-block然后在顶部padding获取此代码。

＆＃13;

＆＃13;

.lbl {
  font-size: larger;
  display: inline-block;
  vertical-align: top;
  padding-top: 25px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

<style>
.lbl {
  font-size: larger;
  float:left;
  padding:20px 0;//or use this padding: 20px 0 0 100px;
}
</style>

Answer 4

我这样做了。

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


#test {
  text-align: center;
  font-size: larger;
}