HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Vertical align an image
The vertical-align
property sets the vertical alignment of an element.
Default value: | baseline |
---|---|
Inherited: | no |
Animatable: | yes. Read about animatable Try it |
Version: | CSS1 |
JavaScript syntax: | object.style.verticalAlign="top" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
vertical-align | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
Value | Description | Demo |
---|---|---|
baseline | The element is aligned with the baseline of the parent. This is default | Demo ❯ |
length | Raises or lower an element by the specified length. Negative values are allowed. Read about length units | Demo ❯ |
% | Raises or lower an element by a percent of the "line-height" property. Negative values are allowed | Demo ❯ |
sub | The element is aligned with the subscript baseline of the parent | Demo ❯ |
super | The element is aligned with the superscript baseline of the parent | Demo ❯ |
top | The element is aligned with the top of the tallest element on the line | Demo ❯ |
text-top | The element is aligned with the top of the parent element's font | Demo ❯ |
middle | The element is placed in the middle of the parent element | Demo ❯ |
bottom | The element is aligned with the lowest element on the line | Demo ❯ |
text-bottom | The element is aligned with the bottom of the parent element's font | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
CSS tutorial: CSS Text Alignment
HTML DOM reference: verticalAlign property