CODEWITHSUNDEEP
htmlcssvertical-alignment
jessica
jessica

Reputation: 1687

Vertical alignment works on block elements

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>

Upvotes: 0

Views: 526

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17954

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>

Upvotes: 2

dippas
dippas

Reputation: 60563

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>

Upvotes: 2

Related Questions