文本内图像的垂直对齐

此例演示:

如何设置文本的垂直对齐图像。

实例解析:

vertical-align属性设置一个元素的垂直对齐方式。

说明:该vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

可以设置以下属性值:

 ● baseline:默认值,元素放置在父元素的基线上。    

 ● sub:垂直对齐文本的下标。    

 ● super:垂直对齐文本的上标    

 ● top:把元素的顶端与行中最高元素的顶端对齐    

 ● text-top:把元素的顶端与父元素字体的顶端对齐    

 ● middle:把此元素放置在父元素的中部。    

 ● bottom:把元素的底端与行中最低的元素的顶端对齐。    

 ● text-bottom:把元素的底端与父元素字体的底端对齐。    

 ● length:

 ● %:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。    


继续学习
||
<!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>
提交重置代码