CODEWITHSUNDEEP
htmlcss
GWR
GWR

Reputation: 2008

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

I have a div which is a fixed height div high enough for two lines of text.

In it, is a label element. When there is only one line-worth of text I want it aligned at the bottom but can't seem to make that happen.

Here is the fiddle:

https://jsfiddle.net/robarwebservices/b88mp0a4/

<div style="height:45px;vertical-align:bottom; border:1px solid orange"><label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:</label></div>

<br /><br />

<div style="height:45px;vertical-align:bottom; border:1px solid orange"><label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:<br />alksjdhf</label></div>

two identical boxes, one with a single line, one with two lines of text. I want the first box to align the single line of text to the bottom without changing how the two lines would look e.g. I don't want to simply pad the top, etc...

Upvotes: 0

Views: 1038

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

flex makes it easy : https://jsfiddle.net/b88mp0a4/1/

div {
  display:flex;
}
label {
  margin :auto 0 0;
}


div {
  display: flex;
}
label {
  margin: auto 0 0;
}
<div style="height:45px;vertical-align:bottom; border:1px solid orange" class="cf">
  <label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:</label>
</div>

<br />
<br />

<div style="height:45px;vertical-align:bottom; border:1px solid orange" class="cf">
  <label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:
    <br />alksjdhf</label>
</div>

table-cell could be used too even that i think it less relevant:

div {
  display: table-cell;
  width: 100vw;
}
label {
  margin: auto 0 0;
}
<div style="height:45px;vertical-align:bottom; border:1px solid orange" class="cf">
  <label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:</label>
</div>

<br />
<br />

<div style="height:45px;vertical-align:bottom; border:1px solid orange" class="cf">
  <label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:
    <br />alksjdhf</label>
</div>

Upvotes: 1

j08691
j08691

Reputation: 208002

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

Upvotes: 1

Related Questions