<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS vertical-align Property
</
title
>
<
style
>
.img1 {
vertical-align: baseline;
}
.img2 {
vertical-align: sub;
}
.img3 {
vertical-align: super;
}
.img4 {
vertical-align: text-top;
}
.img5 {
vertical-align: text-bottom;
}
.img6 {
vertical-align: middle;
}
.img7 {
vertical-align: top;
}
.img8 {
vertical-align: bottom;
}
.img9 {
vertical-align: 25px;
}
img.img10 {
vertical-align: 100%;
}
.img11 {
vertical-align: baseline;
}
.img12 {
vertical-align: inherit;
}
</
style
>
</
head
>
<
body
>
<
h2
>vertical-align: baseline</
h2
>
<
p
>
<
img
class
=
"img1"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: sub</
h2
>
<
p
>
<
img
class
=
"img2"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: super</
h2
>
<
p
>
<
img
class
=
"img3"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: text-top</
h2
>
<
p
>
<
img
class
=
"img4"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: text-bottom</
h2
>
<
p
>
<
img
class
=
"img5"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: middle</
h2
>
<
p
>
<
img
class
=
"img6"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: top</
h2
>
<
p
>
<
img
class
=
"img7"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: bottom</
h2
>
<
p
>
<
img
class
=
"img8"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: length</
h2
>
<
p
>
<
img
class
=
"img9"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: percentage</
h2
>
<
p
>
<
img
class
=
"img10"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: initial</
h2
>
<
p
>
<
img
class
=
"img11"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
><
br
>
<
h2
>vertical-align: inherit</
h2
>
<
p
>
<
img
class
=
"img12"
src
=
alt
=
""
class
=
"alignnone size-medium wp-image-862984"
/>
A computer science portal
</
p
>
</
body
>
</
html
>