文本内图像的垂直对齐

此例演示：

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

实例解析：

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>

提交重置代码

自动运行

全屏