CSS | vertical-align Property
The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element.
Syntax:
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom |text-bottom|initial|inherit;
Note:
- This property is mostly used to align images to it’s corresponding text.
- This property can also be used to align the cells inside tables.
- The vertical-align property cannot be used for the alignment of block level elements like p, ol, ul, h1, div etc.
Property Values:
- baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
- sub: It aligns the element baseline corresponding to the subscript-baseline of its parent.
- super: It aligns the element baseline corresponding to the superscript-baseline of its parent.
- text-top: It aligns the element top corresponding to the top of the parent’s font.
- text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.
- middle: Aligns the element’s middle corresponding to the middle of the parent.
- top: Aligns the element’s top corresponding to the top of the tallest element on it’s line.
- bottom: Aligns the element’s bottom corresponding to the top of the shortest element on it’s line.
- length: Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
- percentage: Aligns the element’s baseline corresponding to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
- initial: Initializes the value to the default value.
- inherit: Inherits the value from the parent element.
Example: This example explains all the values of vertical-align property.
HTML
<!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> |
Output:
Supported Browsers: The browser supported by vertical-align property are listed below:
- Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Internet Explorer 4
- Safari 1.0
- Opera 4.0
![https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"](https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"){kind=link}
Please Login to comment...