How to Align a Label to The "Bottom" of a Div in CSS

How to align a label to the BOTTOM of a div in CSS?

Why vertical-align: bottom is not working alone

Since the height of the parent element is greater than the computed height of the label, Using vertical-align: bottom won't move that (inline) element to the bottom of the parent.

Because in an inline flow, vertical-align determines how the elements are positioned based on their parent's baseline; And using that property on the label won't alter the position of baseline of its parent.

Inline level elements (inline, inline-block) are sitting in their baseline by default. And if they have different heights, the tallest element will determine where the others whould be placed.

I.e. In an inline flow, the tallest element will affect/move the baseline of the parent:

Looking for a solution

Hence in cases where the parent has an explicit height, if we could have an inline child which has the exact same height as the parent (a full-height child), it would affect the inline flow and move the baseline down:

And in order to keep elements (including letters having descenders) within the parent, we should align them vertically by vertical-align: bottom; declaration.

10.8 Line height calculations: 'vertical-align' property

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom
margin edge with the parent's baseline.

bottom
Align the bottom of the aligned subtree with the bottom of the line box.

Putting it all together

Therefore you could create a full-height element (Personally I'd rather go with pseudo-elements) within the parent to align the label at the bottom.

EXAMPLE HERE

#contain-word-div:after {
  content: "";
  display: inline-block;
  height: 100%;            /* Let it be as height as the parent */
  vertical-align: bottom;  /* Align the element at the bottom   */
}

#contain-word-lab {
  display: inline-block;
  vertical-align: bottom;  /* Align the element at the bottom   */
}

Align label to bottom of div in css?

insert label button to div and use display:flex for flexible items be the same length you can read here , and add align-items: end; to set position at bottom

div.row{
  width:800px;
  height:90px;
  display: flex;
}

.btn{
  width:50px;
  height:90px;
  display: flex;
  align-items: end;
  justify-content: center;
}

<div class="row">                                         
    <div class="imgCover">
        <img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" style="height: 90px;width:auto"> 
    </div> 
    <div class="btn">
      <label >Button</label>
    </div>
</div>

Align an entire label element at the bottom of it's parent div

You could give the parent div relative positioning, then give the label absolute positioning with a bottom of zero:

.cf {
  position: relative
}

.cf > label {
  position: absolute;
  bottom: 0
}

jsFiddle example

How to align text to the bottom of a label?

You can align the text to bottom of a label using the below given CSS

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

Just replace your CSS for label as below

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

See the snippet below

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>

How to align text in bottom of label

You can try

.uppgifter
{
    display: table-cell;
    vertical-align: bottom;
    background-color: yellow;
}

jsFiddle

Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

Aligning text to bottom of label

You can do this by putting the text in a span and using flex to align the span to the bottom of the label which will need to have display: flex. The simplest approach is margin-top:auto on the span in the label that has display: flex, or using justify-content: flex-end to force the spans to the bottom of the labels.

EDIT: Spans removed following feedback. THX

.row {
  margin: 0 -15px
}

.col-lg-3 {
  width: 25%;
  float: left;
  padding: 0 15px;
  margin-bottom: 15px
}

.titleLabel {
  height: 3em;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

<div class="row bottom-row">
      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea1" class="titleLabel textareaLabel">A short one line label</label>
          <textarea id="textArea1"></textarea>

      </div>

      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea3" class="titleLabel textareaLabel">A longer label with at least two lines</label>
          <textarea id="textArea3"></textarea>
      </div>

      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea4" class="titleLabel textareaLabel">A longer label with enough text to run over three lines and will be very long</label>
          <textarea id="textArea4"></textarea>
      </div>
  </div>

Align label to centre and left positions in DIV

Following css will give your expected result:

div {    text-align: center;}#orderName {    vertical-align: middle;}#orderNo {    float: left;}

 <div id="mydiv">        <label id="orderName" >Order Name</label>        <label id="orderNo">Order No</label>      </div>

How to align labels on a div layout

First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.

Here is how I would rework your HTML and solve the alignment issue with fair amount of CSS

.row {    width: 100%;    display: inline-block;    margin: 10px auto;    background: green;}
.col4 {    display: inline-block;    width: 33.33333333%;    margin: 1% 0 1% 0;    position: relative;    padding-right: 15px;    float: left;    padding-left: 15px;    min-height: 1px;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}.col4 div{    display: inline-block;}
label{    display: inline-block;    max-width: 100%;    margin-bottom: 5px;    font-weight: 700;}

<div class="row">  <div class="col4">    <div>      <label>Nome:</label>      <span>Del Toro</span>    </div>    <div>      <label>Categoria de produto:</label>      <span>Diverso</span>    </div>  </div>  <div class="col4">    <div>      <label>Data de cadastro:</label>      <span>19/05/2017</span>    </div>    <div>      <label>Ultimo Prêmio:</label>      <span>Leão De Ouro</span>    </div>  </div>  <div class="col4">    <div>      <label>Data de atualizacao:</label>      <span>19/05/2017</span>    </div>    <div>      <label>Filme Indicado:</label>      <span>Shape of Water</span>    </div>  </div></div>

align input tag to bottom inside a div element in bootstrap

You can add flex properties to .col-sm-4

.col-sm-4 {  display: flex;  flex-direction: column;  justify-content: space-between;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="row col-sm-12" style="border: thin solid black ">  <div class="row " margin-top:4px>    <div class="col-sm-4 col-lg-2">      <label class="description" for="element_2"> Amount payable on this date </label>      <input type="number" required="required" class="form-control" name='amountdue' id="amountDue" onkeyup="diffInCollection()">    </div>    <div class="col-sm-4 col-lg-2">      <label class="description" for="element_2">Amount collected on date </label>      <input type="number" required="required" class="form-control" name='collectedamount' align="bottom" id="amountCollected" onkeyup="diffInCollection()">    </div>    <div class="col-sm-4 col-lg-2">      <label class="description" for="element_2">Shortfall in collections for the day </label>      <input type="number" required="required" class="form-control" name='shortfall' id="shortfall" value="">    </div>  </div></div>

---

Related Topics