×

Vertical Alignment - vertical-align [12/16]

You can align the text vertically using the vertical-align property. You can clearly see how it works in table cells. Also, it is conspicuous inside a line of text containing fragments of different sizes.

This property can have many values, but the most commonly used are:

  1. top – alignment to the top of the line
  2. middle – alignment to the middle of the line
  3. bottom – alignment to the bottom of the line
  4. baseline – alignment to the baseline (default).

Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vertical Alignment – vertical-align:</title> </head> <body> <h1>Adaptive Design Components</h1> <p>The following approaches and techniques are used to implement responsive or adaptive layout:</p> <ul> <li>Fluid <small class="top">layout</small></li> <li>Media <small class="middle">queries</small></li> <li>Fluid <small class="bottom">images</small></li> </ul> </body> </html>
CSS
h1 { font-size: 36px; } ul { margin: 0; padding: 0; list-style: none; font-size: 28px; } li { margin-bottom: 5px; white-space: nowrap; background: #f5f5f5; } small { font-size: 8px; color: #666; }
HTML Academy

Check out how vertical alignment affects the text display.

  1. To the tag with the top class, assign vertical-align: top;.
  2. To the tag with the middle class, assign vertical-align: middle;.
  3. Finally, to the tag with the bottom class, assign vertical-align: bottom;.
Theory Check Next