vertical-align - HTML CSS CSS Property

HTML CSS examples for CSS Property:vertical-align

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. vertical-align

Description

This vertical-align CSS property sets the vertical alignment of an inline-level element.

The following table summarizes the vertical-align Property.

Item Value
Default value: baseline
Applies to:Inline-level and table-cell elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


vertical-align:      baseline | 
                     sub | 
                     super | 
                     top | 
                     text-top | 
                     middle | 
                     bottom | 
                     text-bottom | 
                     length | 
                     percentage | 
                     initial | 
                     inherit

Property Values

The following table describes the values of this property.

Value Description
baselineAlign the element baseline to the parent's baseline.
sub Like <sub>.
super Like <sup>.
top Align the top of the element with the top of the box.
text-topAlign the top of the element with the top of the parent element's font.
middle Align the middle of the element to half of the parent's height.
bottom Align the bottom of the element to the bottom of the box.
text-bottom Align the bottom of the element to the bottom of the parent element's font.
length A length value in px, pt, cm, em, etc. The value 0px is same as baseline. Negative value allowed.
percentage The value 0% is same as baseline. Negative value allowed.
initial Sets this property to its default value.
inherit take the value of its parent element vertical-align property.

The example below shows the vertical-align property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS vertical-align property</title>
  <style type="text/css">
    img {<!--   w  ww  . j  a  va 2  s.  com-->
        vertical-align: middle;
    }
    span.sub {
        vertical-align: sub;
    }
    span.super {
        vertical-align: super;
    }
</style>
 </head>
 <body>
  <p>This is a <img src="https://www.java2s.com/style/demo/Opera.png" alt="Smiley"> smiley image.</p>
  <p>The chemical formula of water is: H<span class="sub">2</span>O</p>
  <p>The equation of mass-energy equivalence is: E=mc<span class="super">2</span></p>
 </body>
</html>

Related Tutorials