0

I was told that vertical-align only works for inline, and table elements, however, today I was playing around with vertical-align on a block element, it works just fine? How is that possible? In this case, does vertical-align work for all element types? Or if not, what doesn't it work on?

#wrap {
border: 1px solid black;
width: 500px;
height: 500px;
}
#alignTop {
vertical-align: top;
border: 1px solid black;
}
<div id = 'wrap'>
<div id = 'alignTop'> alignTop </div>
</div>
jessica
  • 1,667
  • 1
  • 17
  • 35
  • 2
    Set it to `vertical-align: bottom` and you'll see it doesn't work. By default all element's start at the top. – Asons Feb 18 '16 at 02:39
  • @LGSon If there are 2 inline-elements, and if the first element has more height than the second element, the second element automatically goes to the bottom of the wrapper. Then if you use vertical-align top, on the second element, it goes back to the top. – jessica Feb 18 '16 at 02:49
  • Yes, it does, though it does not work on block level elements, like a `div`, which @dippas so nicely answered. – Asons Feb 18 '16 at 03:02

2 Answers2

2

By default block element stack on top of each other, so it DOESN'T work.

See W3C

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

And you can see on W3C that vertical-align doesn't work in block elements, only applies to inline-level and table-cell 

Value:    baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:   inline-level and 'table-cell' elements
Inherited:    no
Percentages:      refer to the 'line-height' of the element itself
Media:    visual
Computed value:   for <percentage> and <length> the absolute length, otherwise as specified

Snippet

#wrap {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#alignTop {
  vertical-align: top;
  border: 1px solid black;
}
#alignMiddle {
  vertical-align: middle;
  border: 1px solid black;
}
#alignBottom {
  vertical-align: bottom;
  border: 1px solid black;
}
<div id='wrap'>
  <div id='alignBottom'>alignBottom</div>
  <div id='alignTop'>alignTop</div>
  <div id='alignMiddle'>alignMiddle</div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • 1
    "see on W3C that that vertical-align ... only applies to inline-block and table-cell" . No it only applies to inline-**level** and table-cell elements. That includes inline, inline-block, inline-table, and inline-flex. – Alohci Feb 18 '16 at 08:05
2

According to explanations documented on This link:

  • HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that.
  • vertical-align is used to specify two completely different behaviors depending on where it is used

vertical-align in table cells

When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

  1. <td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
  2. <td style="vertical-align:middle"> ... </td>
  3. <div style="display:table-cell; vertical-align:middle"> ... </div>

vertical-align on inline elements

When vertical-align is applied to inline elements, however, it's a whole new ballgame. In this situation, it behaves like the (old, deprecated) align attribute did on <img> elements. In a modern, standards-compliant browser, the following three code snippets do the same thing:

  1. <img align="middle" ...>
  2. <img style="vertical-align:middle" ...>
  3. <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>
Community
  • 1
  • 1
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • So it only works for inline, table elements, and image elements? – jessica Feb 18 '16 at 02:52
  • Thats exactly true. You may not use it on a block-level element, except for those `inline-blocks` which mimic the inline behavior too – Peyman Mohamadpour Feb 18 '16 at 02:54
  • Aha! So it works for inline-blocks too! Now that's more clear. Cuz, I was messing around with inline-blocks and used vertical-alignment on one of the element and it worked, so I assumed that it works for block elements too. – jessica Feb 18 '16 at 02:55
  • 1
    @jessica img is a inline element, see this [answer](http://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level/2402781#2402781) – dippas Feb 18 '16 at 02:57
  • That is well answered here on [Is element block level or inline level?](http://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level) – Peyman Mohamadpour Feb 18 '16 at 02:58
  • 2
    " When the novice developer applies vertical-align to normal block elements (like a standard
    ) most browsers set the value to inherit to all inline children of that element." - No they don't. Vertical-align doesn't inherit by default. They don't now, and they didn't in 2004 when that article was written.
     – Alohci Feb 18 '16 at 11:30