Javascript 如何将文本与标签底部对齐？

在我正在开发的一个项目中，我被一个视觉方面困住了

这个问题与标签中的文本对齐有关。我无法将文本与标签底部对齐。如果您运行代码段，您可以检查我的问题

片段：

jQuery（函数（）{
Date.prototype.addDays=函数（天）{
var dat=新日期（this.valueOf（））；
dat.setDate（dat.getDate（）+天）；
返回数据；
}
Date.prototype.yyyymmdd=函数（）{
var mm=this.getMonth（）+1；//getMonth（）是基于零的
var dd=this.getDate（）；
返回[this.getFullYear（）+“-”，
（毫米>9？''：'0'）+毫米+“-”，
（dd>9？“”：“0”）+dd
].加入（“”）；
};
var date0=新日期（）；
date0=date0.yyyymmdd（）；
var date1=新日期（）；
date1=date1.addDays（1）；
date1=date1.yyyymmdd（）；
jQuery（“#datepiker_0”）.datepicker({
日期格式：“yy-mm-dd”
}).datepicker（'setDate'，date0）
jQuery（“#datepiker_1”）.日期选择器({
日期格式：“yy-mm-dd”
}).datepicker（'setDate'，date1）
jQuery（“#datepiker_1”）.focusout（函数（）{
});
jQuery（“#num_quartos”）.focusout（函数（）{
var numero_quartos_selec=jQuery（“#num_quartos”）.val（）；
var num_quartos_actuais=jQuery（“.class_quartos”）。长度；
如果（实际数量>选择数量）{
变量id_div_del=“”；
变量id_标签_del=“”；
变量id_br_del=“”；
对于（var i=num_quartos_actuais；i>numo_quartos_selec；i--）{
id_label_del=“#label_quarto_uu”+i；
id_div_del=“#quarto_uu”+i；
id_br_del=“#id_br”+i；
jQuery（id_label_del）.remove（）；
jQuery（id_div_del）.remove（）；
jQuery（id_br_del）.remove（）；
}
}
如果（实际值<选择值）{
变量id_div=“”；
var id_label=“”；
var div_id_label=“”；
var id_br=“”；
var name_br=“”；
var name_div=“”；
var name_label_div=“”；
var class_div=“class_quartos”；
var j=实际数量四分之一；
var标签=”；
var div=“”；
var br=“”；
var输入_1=“”；
var输入_2=“”；
var输入_3=“”；
var标签_1=“”；
var标签_2=“”；
var标签_3=“”；
变量id_输入_1=“”；
var name_input_1=“”；
变量id_输入_2=“”；
var name_input_2=“”；
变量id_输入_3=“”；
var name_input_3=“”；
var div_center=“”；
var div_left=“”；
var div_right=“”；
var div_id_center=“”；
var div_id_left=“”；
var div_id_right=“”；
var div_center_label=“”；
var div_center_label_id=“”；
对于（var i=num_quartos_actuais；i”）.attr（{id:id\u br，name:name\u br}）；
附件（标签）；
div_id_center=“div_center”+j；
div_id_left=“div_left”+j；
div_id_right=“div_right”+j；
div_center=jQuery（“”）.attr（{id:div_id_center，class:“div_center”}）；
div_left=jQuery（“”）.attr（{id:div_id_left，类：“div_left”}）；
div_right=jQuery（“”）.attr（{id:div_id_right，class:“div_left”}）；
label_1=jQuery（“”）.attr（'for'，name_input_1）.text（“Adultos”）；
id_input_1=“num_adultos”+j；
name_input_1=“num_adultos”+j；
input\u 1=jQuery（“”）.attr（{id:id\u input\u 1，name:name\u input\u 1，value:“2”}）；
输入_1.appendTo（标签_1）；
标签1.附件（左分区）；
输入1.appendTo（左分区）；
div_左。附录（div）；
label_2=jQuery（“”）.attr（'for'，name_input_2）.text（“Crianças（3-12 anos）”）；
id_input_2=“num_criancas”+j；
name_input_2=“num_criancas”+j；
input_2=jQuery（“”）.attr（{id:id_input_2，name:name_input_2，value:“0”}）；
输入_2.appendTo（标签_2）；
标签2.附录（右分区）；
输入2.appendTo（右分区）；
右分区。附件（分区）；
label_3=jQuery（“”）.attr（'for'，name_input_3）.text（“Bebés（0-2anos）”）；
id_input_3=“num_bebes”+j；
name_input_3=“num_bebes”+j；
input_3=jQuery（“”）.attr（{id:id_input_3，name:name_input_3，value:“0”}）；
输入_3.appendTo（标签_3）；
标签3.附件（分区中心）；
输入3.附件（分区中心）；
分区中心附件（分区）；
jQuery（'#num_ocupantes'）.append（br）；
jQuery（“#num_ocupantes”）.append（div_center_label_id）；
jQuery（'#num_ocupantes'）.append（div）；
}
}
}); 
});
标签{
显示：块；
宽度：75px；
高度：40px；
文本对齐：居中；
}
输入{
显示：块；
宽度：75px；
高度：20px；
文本对齐：右对齐；
}
.div_中心{
显示：内联块；
浮动：中心；
宽度：100px；
}
.左分区{
浮动：左；
宽度：100px；
}
.div_右{
浮动：对；
宽度：100px；
}
康泰纳先生{
文本对齐：居中；
宽度：100%px；
}
.四级{
文本对齐：居中；
宽度：100%px；
}

jQuery UI日期选择器-默认功能
切加达
萨伊达
夸脱



四分之一
阿杜尔托斯
克里安萨斯（3-12阿诺斯）
贝贝斯（0-2个阿诺斯）

或

或

您可以使用下面给定的CSS将文本与标签底部对齐

display: table-cell;
vertical-align: bottom;

只需将CSS替换为
标签
，如下所示

label{
  /*display: block;*/
  display: table-cell;
  vertical-align: bottom;
  width: 75px;
  height: 40px;
  text-align: center;
}

请参阅下面的代码片段


jQuery（函数（）{
Date.prototype.addDays=函数（天）{
var dat=新日期（this.valueOf（））；
dat.setDate（dat.getDate（）+天）；
返回数据；
}
Date.prototype.yy
display: table-cell;
vertical-align: bottom;

label{
  /*display: block;*/
  display: table-cell;
  vertical-align: bottom;
  width: 75px;
  height: 40px;
  text-align: center;
}