文本内图像的垂直对齐
此例演示：
如何设置文本的垂直对齐图像。
实例解析：
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>
预览
Clear
- 课程推荐
- 课件下载
课件暂不提供下载，工作人员正在整理中，后期请多关注该课程~ 