What differences exist between valign and vertical-align?

jmoreno 0
Viewed 34

Is there any difference at all between having a td with the attribute valign set and having the same TD with the style set to the equivalent "vertical-align"?

I see lots of people saying to switch over, but nobody explicitly saying they are 100% compatible or pointing out the differences.

valign vertical-alignment css
1 Answers

The deprecated and obsolete valign attribute applies only to table cells and offers these value options:

  • baseline
  • bottom
  • middle
  • top

By contrast, the vertical-align CSS property applies to most inline, inline-block, and table-cell elements, and offers several additional options:

  • sub
  • super
  • text-top
  • text-bottom
  • arbitrary length and percentage values

Otherwise I'd expect them to be essentially interchangeable.

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-baseline {
  vertical-align: baseline;
}

td {
  height: 50px;
  padding: 0 10px;
  background: pink;
}
<table>
  <tr>
    <td valign="top">valign</td>
    <td class="vertical-align-top">vertical-align top</td>
  </tr>

  <tr>
    <td valign="middle">valign middle</td>
    <td class="vertical-align-middle">vertical-align middle</td>
  </tr>

  <tr>
    <td valign="baseline">valign baseline</td>
    <td class="vertical-align-baseline">vertical-align baseline</td>
  </tr>
</table>

isherwood0
Related