It is used as<\/p>\n
.top<\/p>\n
{ vertical-align: super; }<\/p>\n
The vertical-align property has the value of \u2018baseline\u2019 as the default value for all the elements on a web page. It applies to inline elements like <img\/> and <span>.<\/p>\n
Subscript or Superscript<\/strong> – Subscript text appears slightly smaller and lower than the surrounding text. Superscript text is raised above and appears slightly smaller than the surrounding text. It is illustrated in the figure<\/p>\n The vertical-align property is used for subscript and superscript as<\/p>\n .top { vertical-align: super; }<\/p>\n .below {vertical-align: sub; }<\/p>\n The example shows that the content of the \u2018top\u2019 element appears slightly higher and that the content of the \u2018below\u2019 element appears slightly lower.<\/p>\n Remaining values<\/strong> – The remaining values of the vertical-align property are illustrated by an example as<\/p>\n An example web page having div with a image and a text element to be vertically aligned and whose CSS is as<\/p>\n div * { vertical-align: middle }<\/p>\n Various values for the vertical-align property are illustrated as<\/p>\n The top and bottom properties are a bit tricky in the way that the position of top and bottom may change if the element has vertically aligned children.<\/p>\n As usually nested vertically aligned elements are not used hence, the top and bottom values would act more like this<\/p>\n![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-1.png\")
<\/p>\n\n\n
\n CSS Value & Explanation<\/strong><\/td>\n Browser output<\/strong><\/td>\n<\/tr>\n<\/thead>\n\n \n \u00a0<\/strong>Baseline:<\/strong> Aligns the baseline of the element with the baseline of the parent element. If the element doesn’t have a baseline, align the bottom margin edge with the parent’s baseline.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-2-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong>Middle:<\/strong> Aligns the vertical midpoint of the element with the baseline of the parent element plus half the x-height of the parent.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-3-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong>Sub:<\/strong> Lowers the baseline of the element to the proper position for subscripts of the parent element. (this value has no effect on the font size of the element’s text).<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-4-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong>Super:<\/strong> Raises the baseline of the element to the proper position for superscripts of the parent element. (This value has no effect on the font size of the element’s text).<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-5-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong>Text-top:<\/strong> Aligns the top of the element with the top of the parent’s content area, which is determined by the font size.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-6-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong>Text-bottom:<\/strong> Aligns the bottom of the element with the bottom of the parent’s content area, which is determined by the font size.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-7-1.gif\")
<\/td>\n<\/tr>\n\n \u00a0<\/strong><percentage>:<\/strong> Raises (positive value) or lowers (negative value) the element by this distance (a percentage of the ‘line-height’ value). A value of ‘0’ means the same as ‘baseline’.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-8-1.gif\")
<\/td>\n<\/tr>\n\n <length>:<\/strong> Raises (positive value) or lowers (negative value) the element by this distance. A value of ‘0’ means the same as ‘baseline’.<\/td>\n ![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-9-1.gif\")
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n CSS Value & Explanation<\/strong><\/td>\n Browser output<\/strong><\/td>\n<\/tr>\n<\/thead>\n\n \n \u00a0<\/strong>Top:<\/strong> Aligns the top of the element with the top of the parent element.<\/td>\n <\/td>\n<\/tr>\n\n \u00a0<\/strong>Bottom<\/strong>: Aligns the bottom of the element with the bottom of the parent element.<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
![\"Vertically](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Vertically-Aligning-Content-10-1.png\")
<\/p>\n