8

DEMO can be found at:

http://www.bootply.com/VZ7gvA7ndE#

I set the height of div to 100px and want to show the label at the bottom of the div. I use 

#contain-word-lab {
  vertical-align: bottom;
  margin-bottom: 5px;
}

However, this doesn't work at all. The label still align to the top of the div.

Does anyone have any ideas about this? Why vertical-align doesn't work here? Thanks!

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Hanfei Sun
  • 45,281
  • 39
  • 129
  • 237

8 Answers8

26

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:

illustration of baseline

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:

A full-height element which affects the baseline

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

applying vertical align property

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   */
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • 1
    thats a nifty little trick, as long as pseudo elements are ok :D – haxxxton Aug 21 '14 at 06:46
  • Thanks! It's very interesting! Do you mean the "pseudo-element" change the baseline of the label? Is there any documents or detailed explainations about this trick? – Hanfei Sun Aug 21 '14 at 06:56
  • @Firegun That's not about the pseudo-element, but about any dummy element which fills the parent vertically while it's in inline level as well. I.e. an inline full-height child. The higher inline element would affect the baseline. – Hashem Qolami Aug 21 '14 at 06:58
  • @downvoter: you really don't have a reason, do you? If so, share with us please. – Hashem Qolami Aug 21 '14 at 07:00
  • @HashemQolami Still not very clear about the baseline/filling rule behind the trick.. – Hanfei Sun Aug 21 '14 at 07:03
  • @Firegun Just take a look at **[this demo](http://jsbin.com/dewaqa/2/edit)** When the parent doesn't have an explicit height, the taller inline element affects the baseline of the inline elements. Hence in your particular case that the parent has an explicit height, if we could have a child that has an exact height, it'll affect the baseline and move that to bottom. – Hashem Qolami Aug 21 '14 at 07:08
  • @Firegun I added more details to the answer. Hope it makes things clear. – Hashem Qolami Aug 22 '14 at 08:07
8

quick example

http://jsfiddle.net/oa2gmuq3/

if you add 

position:absolute;
bottom:0px;

to the label it likes to keep it at the bottom

C Williams
  • 149
  • 8
3

set it as position:absolute; 

#contain-word-lab {
  position:absolute;
  bottom:5px;
}
code addict
  • 39
  • 2
3

Apply position:relative to the parent div and make your label as position:absolute.

 #contain-word-div {
 height: 100px;
 position:relative;
 }
 #contain-word-lab {
  position:absolute;
  bottom:5px;
 }

DEMO

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
1

vertical-align tends to work best when the containers are table/table-like elements (eg. table, tr, td, th) or inline text elements (eg span). However, because table elements for layout are not a good idea. We can make other elements function like them using the display:table; and display:table-cell; css properties.

Try applying the following css:

#contain-word-div {
  height: 100px;
  border: 1px solid black; /* added just for visualising position */
  display:table;
}
#contain-word-lab {
  display:table-cell;
  vertical-align: bottom;
  padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}

DEMO

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • While true, since the OP is using TW Bootstrap, changing the display type of the column to `table` may cause a trouble. – Hashem Qolami Aug 21 '14 at 07:21
  • 1
    possibly, but it could always be contained within a `div` element if that doesnt become a worry. here is an example with other `div`s around it without issue. http://www.bootply.com/gmpFwz4lIn – haxxxton Aug 21 '14 at 07:24
0

vertical-align only applies to table cells. If you want to position an element at the bottom of its parent, you need to give it position: absolute; and bottom: 0;.

recursive
  • 83,943
  • 34
  • 151
  • 241
0

Try to do following

FIDDLE DEMO

#contain-word-lab {
    vertical-align='bottom';/***Remove This***/
    bottom:2px;
    position:absolute;
}
Richa
  • 3,261
  • 2
  • 27
  • 51
  • So it'll be positioned with the respect of the initial containing block which is established for `` element. I.e at the bottom of the page. – Hashem Qolami Aug 21 '14 at 06:56
0

The "bottom" won't work anyway :) Try just bottom, without ". Plus your label needs a height too. Now it's auto height is used and this is exactly the font-size. I'd suggest adding a line-height: 100px; to your label.

Stephan Weinhold
  • 1,623
  • 1
  • 28
  • 37