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

Question

我在开发的项目中陷入视觉方面的困扰

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

片段：

 jQuery(function() { Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; } Date.prototype.yyyymmdd = function() { var mm = this.getMonth() + 1; // getMonth() is zero-based var dd = this.getDate(); return [this.getFullYear() + "-", (mm>9 ? '' : '0') + mm + "-", (dd>9 ? '' : '0') + dd ].join(''); }; var date0 = new Date(); date0 = date0.yyyymmdd(); var date1 = new Date(); date1 = date1.addDays(1); date1 = date1.yyyymmdd(); jQuery("#datepiker_0").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date0) jQuery("#datepiker_1").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date1) jQuery("#datepiker_1").focusout(function(){ }); jQuery("#num_quartos").focusout(function(){ var numero_quartos_selec = jQuery( "#num_quartos" ).val(); var num_quartos_actuais = jQuery(".class_quartos").length; if( num_quartos_actuais > numero_quartos_selec){ var id_div_del = ""; var id_label_del = ""; var id_br_del = ""; for (var i = num_quartos_actuais; i > numero_quartos_selec; i--){ id_label_del = "#label_quarto_"+i; id_div_del = "#quarto_"+i; id_br_del = "#id_br"+i; jQuery( id_label_del ).remove(); jQuery( id_div_del ).remove(); jQuery( id_br_del ).remove(); } } if(num_quartos_actuais < numero_quartos_selec){ var 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 = num_quartos_actuais; var label = ""; var div = ""; var br = ""; var input_1 = ""; var input_2 = ""; var input_3 = ""; var label_1 = ""; var label_2 = ""; var label_3 = ""; var id_input_1 = ""; var name_input_1 = ""; var id_input_2 = ""; var name_input_2 = ""; var id_input_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 = ""; for(var i = num_quartos_actuais; i < numero_quartos_selec; i++){ j++; id_div = "quarto_"+j; name_label_div = "Quarto "+j; name_div = "quarto_"+j; name_br = "name_br_"+j; id_br = "id_br"+j; div_id_label = "label_quarto_"+j; div_center_label_id = "id_label_center_"+j; div_center_label_id = jQuery('<div>').attr({id: div_center_label_id, class: "div_center"}); label = jQuery("<label>").attr( 'for', name_div).text(name_label_div); label = label.attr({id: div_id_label}); label.appendTo(div_center_label_id); div = jQuery('<div>').attr({id: id_div, name: name_div, class: class_div}); br = jQuery('<br>').attr({id: id_br, name: name_br}); div.appendTo(label); div_id_center = "div_center"+j; div_id_left = "div_left"+j; div_id_right = "div_right"+j; div_center = jQuery('<div>').attr({id: div_id_center, class: "div_center"}); div_left = jQuery('<div>').attr({id: div_id_left, class: "div_left"}); div_right = jQuery('<div>').attr({id: div_id_right, class: "div_left"}); label_1 = jQuery("<label>").attr( 'for', name_input_1).text("Adultos"); id_input_1 = "num_adultos_"+j; name_input_1 = "num_adultos_"+j; input_1 = jQuery('<input>').attr({id: id_input_1, name: name_input_1, value: "2"}); input_1.appendTo(label_1); label_1.appendTo(div_left); input_1.appendTo(div_left); div_left.appendTo(div); label_2 = jQuery("<label>").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('<input>').attr({id: id_input_2, name: name_input_2, value: "0"}); input_2.appendTo(label_2); label_2.appendTo(div_right); input_2.appendTo(div_right); div_right.appendTo(div); label_3 = jQuery("<label>").attr( 'for', name_input_3).text("Bebés (0-2 anos)"); id_input_3 = "num_bebes_"+j; name_input_3 = "num_bebes_"+j; input_3 = jQuery('<input>').attr({id: id_input_3, name: name_input_3, value: "0"}); input_3.appendTo(label_3); label_3.appendTo(div_center); input_3.appendTo(div_center); div_center.appendTo(div); jQuery('#num_ocupantes').append(br); jQuery('#num_ocupantes').append(div_center_label_id); jQuery('#num_ocupantes').append(div); } } }); }); 

 label{ display: block; width: 75px; height: 40px; text-align: center; } input{ display: block; width: 75px; height: 20px; text-align: right; } .div_center{ display: inline-block; float:center; width:100px; } .div_left{ float:left; width:100px; } .div_right{ float:right; width:100px; } .conteiner{ text-align:center; width:100%px; } .class_quartos{ text-align:center; width:100%px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class = "conteiner"> <div class = "div_left"> <label for ="datepiker_0">Chegada</label> <input type ="text" id = "datepiker_0" name = "datepiker_0" value = "" class = "datepicker"> </div> <div class = "div_center"> <label for ="datepiker_1">Saída</label> <input type ="text" id = "datepiker_1" name = "datepiker_1" value = "" class = "datepicker"> </div> <div class = "div_right"> <label for = "num_quartos">Quartos</label> <input type = "text" id = "num_quartos" name = "num_quartos" value = "1"> </div> </div> <br> </br> <div id = "num_ocupantes" class= "conteiner"> <div class = "div_center"> <label id = "label_quarto_1" for = "quarto_1">Quarto 1</label> </div> <div id = "quarto_1" class = "class_quartos"> <div class = "div_left"> <label for = "num_Adultos_1">Adultos</label> <input type ="text" id = "num_adultos_1" name = "num_adultos_1" value = "2" class = "num"> </div> <div class = "div_center"> <label for = "num_criancas_1">Crianças (3-12 anos)</label> <input type ="text" id = "num_criancas_1" name = "num_criancas_1" value = "0" class = "num"> </div> <div class = "div_right"> <label for = "num_bebes_1">Bebés (0-2 anos)</label> <input type ="text" id = "num_bebes_1" name = "num_bebes_1" value = "0" class = "num"> </div> </div> </div> 

如果您运行该代码段，请检查标签的文本（Chegada，Saída，Quartos，Adultos）是否与其他文本相关。

有没有办法通过CSS解决这个问题？

Answer 1

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

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

只需将您的CSS替换为label ，如下所示

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

请参见下面的代码段

 jQuery(function() { Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; } Date.prototype.yyyymmdd = function() { var mm = this.getMonth() + 1; // getMonth() is zero-based var dd = this.getDate(); return [this.getFullYear() + "-", (mm>9 ? '' : '0') + mm + "-", (dd>9 ? '' : '0') + dd ].join(''); }; var date0 = new Date(); date0 = date0.yyyymmdd(); var date1 = new Date(); date1 = date1.addDays(1); date1 = date1.yyyymmdd(); jQuery("#datepiker_0").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date0) jQuery("#datepiker_1").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date1) jQuery("#datepiker_1").focusout(function(){ }); jQuery("#num_quartos").focusout(function(){ var numero_quartos_selec = jQuery( "#num_quartos" ).val(); var num_quartos_actuais = jQuery(".class_quartos").length; if( num_quartos_actuais > numero_quartos_selec){ var id_div_del = ""; var id_label_del = ""; var id_br_del = ""; for (var i = num_quartos_actuais; i > numero_quartos_selec; i--){ id_label_del = "#label_quarto_"+i; id_div_del = "#quarto_"+i; id_br_del = "#id_br"+i; jQuery( id_label_del ).remove(); jQuery( id_div_del ).remove(); jQuery( id_br_del ).remove(); } } if(num_quartos_actuais < numero_quartos_selec){ var 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 = num_quartos_actuais; var label = ""; var div = ""; var br = ""; var input_1 = ""; var input_2 = ""; var input_3 = ""; var label_1 = ""; var label_2 = ""; var label_3 = ""; var id_input_1 = ""; var name_input_1 = ""; var id_input_2 = ""; var name_input_2 = ""; var id_input_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 = ""; for(var i = num_quartos_actuais; i < numero_quartos_selec; i++){ j++; id_div = "quarto_"+j; name_label_div = "Quarto "+j; name_div = "quarto_"+j; name_br = "name_br_"+j; id_br = "id_br"+j; div_id_label = "label_quarto_"+j; div_center_label_id = "id_label_center_"+j; div_center_label_id = jQuery('<div>').attr({id: div_center_label_id, class: "div_center"}); label = jQuery("<label>").attr( 'for', name_div).text(name_label_div); label = label.attr({id: div_id_label}); label.appendTo(div_center_label_id); div = jQuery('<div>').attr({id: id_div, name: name_div, class: class_div}); br = jQuery('<br>').attr({id: id_br, name: name_br}); div.appendTo(label); div_id_center = "div_center"+j; div_id_left = "div_left"+j; div_id_right = "div_right"+j; div_center = jQuery('<div>').attr({id: div_id_center, class: "div_center"}); div_left = jQuery('<div>').attr({id: div_id_left, class: "div_left"}); div_right = jQuery('<div>').attr({id: div_id_right, class: "div_left"}); label_1 = jQuery("<label>").attr( 'for', name_input_1).text("Adultos"); id_input_1 = "num_adultos_"+j; name_input_1 = "num_adultos_"+j; input_1 = jQuery('<input>').attr({id: id_input_1, name: name_input_1, value: "2"}); input_1.appendTo(label_1); label_1.appendTo(div_left); input_1.appendTo(div_left); div_left.appendTo(div); label_2 = jQuery("<label>").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('<input>').attr({id: id_input_2, name: name_input_2, value: "0"}); input_2.appendTo(label_2); label_2.appendTo(div_right); input_2.appendTo(div_right); div_right.appendTo(div); label_3 = jQuery("<label>").attr( 'for', name_input_3).text("Bebés (0-2 anos)"); id_input_3 = "num_bebes_"+j; name_input_3 = "num_bebes_"+j; input_3 = jQuery('<input>').attr({id: id_input_3, name: name_input_3, value: "0"}); input_3.appendTo(label_3); label_3.appendTo(div_center); input_3.appendTo(div_center); div_center.appendTo(div); jQuery('#num_ocupantes').append(br); jQuery('#num_ocupantes').append(div_center_label_id); jQuery('#num_ocupantes').append(div); } } }); }); 

 label{ /*display: block;*/ display: table-cell; vertical-align: bottom; width: 75px; height: 40px; text-align: center; } input{ display: block; width: 75px; height: 20px; text-align: right; } .div_center{ display: inline-block; float:center; width:100px; } .div_left{ float:left; width:100px; } .div_right{ float:right; width:100px; } .conteiner{ text-align:center; width:100%px; } .class_quartos{ text-align:center; width:100%px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class = "conteiner"> <div class = "div_left"> <label for ="datepiker_0">Chegada</label> <input type ="text" id = "datepiker_0" name = "datepiker_0" value = "" class = "datepicker"> </div> <div class = "div_center"> <label for ="datepiker_1">Saída</label> <input type ="text" id = "datepiker_1" name = "datepiker_1" value = "" class = "datepicker"> </div> <div class = "div_right"> <label for = "num_quartos">Quartos</label> <input type = "text" id = "num_quartos" name = "num_quartos" value = "1"> </div> </div> <br> </br> <div id = "num_ocupantes" class= "conteiner"> <div class = "div_center"> <label id = "label_quarto_1" for = "quarto_1">Quarto 1</label> </div> <div id = "quarto_1" class = "class_quartos"> <div class = "div_left"> <label for = "num_Adultos_1">Adultos</label> <input type ="text" id = "num_adultos_1" name = "num_adultos_1" value = "2" class = "num"> </div> <div class = "div_center"> <label for = "num_criancas_1">Crianças (3-12 anos)</label> <input type ="text" id = "num_criancas_1" name = "num_criancas_1" value = "0" class = "num"> </div> <div class = "div_right"> <label for = "num_bebes_1">Bebés (0-2 anos)</label> <input type ="text" id = "num_bebes_1" name = "num_bebes_1" value = "0" class = "num"> </div> </div> </div> 

Answer 2

label {
 display: flex;
 justify-content: center;
 align-items: flex-end;
}

要么

label {
 display: table-cell;
 vertical-align: bottom;
}

Answer 3

display: flex; align-items: flex-end; 会将文字放在label的底部

 jQuery(function() { Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; } Date.prototype.yyyymmdd = function() { var mm = this.getMonth() + 1; // getMonth() is zero-based var dd = this.getDate(); return [this.getFullYear() + "-", (mm>9 ? '' : '0') + mm + "-", (dd>9 ? '' : '0') + dd ].join(''); }; var date0 = new Date(); date0 = date0.yyyymmdd(); var date1 = new Date(); date1 = date1.addDays(1); date1 = date1.yyyymmdd(); jQuery("#datepiker_0").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date0) jQuery("#datepiker_1").datepicker({ dateFormat: 'yy-mm-dd' }).datepicker('setDate', date1) jQuery("#datepiker_1").focusout(function(){ }); jQuery("#num_quartos").focusout(function(){ var numero_quartos_selec = jQuery( "#num_quartos" ).val(); var num_quartos_actuais = jQuery(".class_quartos").length; if( num_quartos_actuais > numero_quartos_selec){ var id_div_del = ""; var id_label_del = ""; var id_br_del = ""; for (var i = num_quartos_actuais; i > numero_quartos_selec; i--){ id_label_del = "#label_quarto_"+i; id_div_del = "#quarto_"+i; id_br_del = "#id_br"+i; jQuery( id_label_del ).remove(); jQuery( id_div_del ).remove(); jQuery( id_br_del ).remove(); } } if(num_quartos_actuais < numero_quartos_selec){ var 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 = num_quartos_actuais; var label = ""; var div = ""; var br = ""; var input_1 = ""; var input_2 = ""; var input_3 = ""; var label_1 = ""; var label_2 = ""; var label_3 = ""; var id_input_1 = ""; var name_input_1 = ""; var id_input_2 = ""; var name_input_2 = ""; var id_input_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 = ""; for(var i = num_quartos_actuais; i < numero_quartos_selec; i++){ j++; id_div = "quarto_"+j; name_label_div = "Quarto "+j; name_div = "quarto_"+j; name_br = "name_br_"+j; id_br = "id_br"+j; div_id_label = "label_quarto_"+j; div_center_label_id = "id_label_center_"+j; div_center_label_id = jQuery('<div>').attr({id: div_center_label_id, class: "div_center"}); label = jQuery("<label>").attr( 'for', name_div).text(name_label_div); label = label.attr({id: div_id_label}); label.appendTo(div_center_label_id); div = jQuery('<div>').attr({id: id_div, name: name_div, class: class_div}); br = jQuery('<br>').attr({id: id_br, name: name_br}); div.appendTo(label); div_id_center = "div_center"+j; div_id_left = "div_left"+j; div_id_right = "div_right"+j; div_center = jQuery('<div>').attr({id: div_id_center, class: "div_center"}); div_left = jQuery('<div>').attr({id: div_id_left, class: "div_left"}); div_right = jQuery('<div>').attr({id: div_id_right, class: "div_left"}); label_1 = jQuery("<label>").attr( 'for', name_input_1).text("Adultos"); id_input_1 = "num_adultos_"+j; name_input_1 = "num_adultos_"+j; input_1 = jQuery('<input>').attr({id: id_input_1, name: name_input_1, value: "2"}); input_1.appendTo(label_1); label_1.appendTo(div_left); input_1.appendTo(div_left); div_left.appendTo(div); label_2 = jQuery("<label>").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('<input>').attr({id: id_input_2, name: name_input_2, value: "0"}); input_2.appendTo(label_2); label_2.appendTo(div_right); input_2.appendTo(div_right); div_right.appendTo(div); label_3 = jQuery("<label>").attr( 'for', name_input_3).text("Bebés (0-2 anos)"); id_input_3 = "num_bebes_"+j; name_input_3 = "num_bebes_"+j; input_3 = jQuery('<input>').attr({id: id_input_3, name: name_input_3, value: "0"}); input_3.appendTo(label_3); label_3.appendTo(div_center); input_3.appendTo(div_center); div_center.appendTo(div); jQuery('#num_ocupantes').append(br); jQuery('#num_ocupantes').append(div_center_label_id); jQuery('#num_ocupantes').append(div); } } }); }); 

 label{ display: flex; width: 75px; height: 40px; text-align: center; align-items: flex-end; } input{ display: block; width: 75px; height: 20px; text-align: right; } .div_center{ display: inline-block; float:center; width:100px; } .div_left{ float:left; width:100px; } .div_right{ float:right; width:100px; } .conteiner{ text-align:center; width:100%px; } .class_quartos{ text-align:center; width:100%px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class = "conteiner"> <div class = "div_left"> <label for ="datepiker_0">Chegada</label> <input type ="text" id = "datepiker_0" name = "datepiker_0" value = "" class = "datepicker"> </div> <div class = "div_center"> <label for ="datepiker_1">Saída</label> <input type ="text" id = "datepiker_1" name = "datepiker_1" value = "" class = "datepicker"> </div> <div class = "div_right"> <label for = "num_quartos">Quartos</label> <input type = "text" id = "num_quartos" name = "num_quartos" value = "1"> </div> </div> <br> </br> <div id = "num_ocupantes" class= "conteiner"> <div class = "div_center"> <label id = "label_quarto_1" for = "quarto_1">Quarto 1</label> </div> <div id = "quarto_1" class = "class_quartos"> <div class = "div_left"> <label for = "num_Adultos_1">Adultos</label> <input type ="text" id = "num_adultos_1" name = "num_adultos_1" value = "2" class = "num"> </div> <div class = "div_center"> <label for = "num_criancas_1">Crianças (3-12 anos)</label> <input type ="text" id = "num_criancas_1" name = "num_criancas_1" value = "0" class = "num"> </div> <div class = "div_right"> <label for = "num_bebes_1">Bebés (0-2 anos)</label> <input type ="text" id = "num_bebes_1" name = "num_bebes_1" value = "0" class = "num"> </div> </div> </div>