Vertical alignment of images within text

This example demonstrates:

#How to set the vertical alignment of the text image.

Example analysis:

The vertical-align attribute sets the vertical alignment of an element.

Description: The vertical-align attribute defines the vertical alignment of the baseline of an in-line element relative to the baseline of the line where the element is located. Allows specifying negative length values ​​and percentage values. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell contents in the cell box.

You can set the following attribute values:

●baseline: Default value, the element is placed on the baseline of the parent element.

● Sub: Vertically align the subscript of the text.

●super: Vertically align the superscript of the text

●top: Align the top of the element with the top of the highest element in the row

● Text-top: Align the top of the element with the top of the font of the parent element

● middle: Place this element in the middle of the parent element .

● bottom: Align the bottom of the element with the top of the lowest element in the row.​

● text-bottom: Align the bottom of the element with the bottom of the font of the parent element.​

● Length:

● %: Use the percentage value of the "line-height" attribute to arrange this element. Negative values ​​are allowed.


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;} </style> </head> <body> <p>一个<img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" />默认对齐的图像。</p> <p>一个<img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-top 对齐的图像。</p> <p>一个<img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-bottom 对齐的图像。</p> </body> </html>
submitReset Code