CSS中心在标签字段中对齐 [英] CSS center align in label field

问题描述

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

I'm trying to display something like this one:

*请以蓝线和黑线为边框

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

其中图像描述文本应在剩余空间中以水平居中，但是我无法弄清楚应使用的css.

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.

这是我的小提琴: 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;
}

推荐答案

删除float:left，仅使用与图像对齐的文字即可.请尝试以下:

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>

编辑:上方将垂直对齐文本.如果要水平对齐，请执行以下操作:

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>

并使用以下CSS:

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

工作中的Plnkr: Plnkr

Working Plnkr : Plnkr

这篇关于CSS中心在标签字段中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！