The vertical-align property specifies the vertical alignment of an inline, inline-block or table-cell box. Inline-level elements include images, text, buttons, etc.
This property works only in the following contexts:
- To vertically align a content inside table cells (<td>) and elements with display: table-cell.
- To vertically align the box of an inline element inside its line box. E.g. it can be used to vertically align <img> in a line of text.
We can’t use the vertical-align property to vertically align block-level elements.
Initial Value
baseline
Applies to
Inline-level and table-cell elements, also applies to ::first-letter and ::first-line.
Inherited
No.
Animatable
Yes. The vertical alignment is animatable.
Version
CSS1
DOM Syntax
object.style.verticalAlign = “middle”;
Tóm Tắt
Syntax
vertical-align
: baseline | length | sub | super | top | text-top | middle | bottom| text-bottom | initial | inherit;Example of the
vertical-align
property with the “sub” value:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
<
style
>
span
{
vertical-align
: sub;
}
</
style
>
</
head
>
<
body
>
<
h2
>Vertical-align property example</
h2
>
<
p
>This is some paragraph with
<
span
>vertical-align</
span
> property.
</
p
>
</
body
>
</
html
>Try it Yourself »
Result
Example of the
vertical-align
property with the “middle” value:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
<
style
>
span
{
vertical-align
: middle;
}
</
style
>
</
head
>
<
body
>
<
h2
>Vertical-align property example</
h2
>
<
p
>This is some paragraph with
<
span
>vertical-align</
span
> property.
</
p
>
</
body
>
</
html
>Try it Yourself »
Example of the
vertical-align
property with the “super” value:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
<
style
>
span
{
vertical-align
: super;
}
</
style
>
</
head
>
<
body
>
<
h2
>Vertical-align property example</
h2
>
<
p
>This is some paragraph with
<
span
>vertical-align</
span
> property.
</
p
>
</
body
>
</
html
>Try it Yourself »
Example of the
vertical-align
property with the “top” and “bottom” values:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
<
style
>
table
{
width
: 100%
;
border-collapse
: collapse;
}
table
,
th
,
td
{
border
: 1px
solid #cccccc
;
}
td
{
height
: 100px
;
}
.top
{
vertical-align
: top;
}
.bottom
{
vertical-align
: bottom;
}
</
style
>
</
head
>
<
body
>
<
h2
>Vertical-align property example</
h2
>
<
table
>
<
tr
>
<
th
>Bottom</
th
>
<
th
>Middle</
th
>
<
th
>Top</
th
>
</
tr
>
<
tr
>
<
td
class
="bottom"
>Some text</
td
>
<
td
>Some text</
td
>
<
td
class
="top"
>Some text</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>Try it Yourself »
Values
