CSS vertical-align 属性的简单用法？

最新推荐文章于 2024-05-05 00:56:26 发布

cvper

最新推荐文章于 2024-05-05 00:56:26 发布

阅读量945

点赞数 1

分类专栏： Interview 文章标签： CSS 垂直对齐

本文链接：https://blog.csdn.net/cvper/article/details/79353112

版权

Interview 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

（测试环境：chrome）

CSS vertical-align属性：设置元素的垂直对齐方式

通过几个例子来看：

第一个：正常情况下，我们在段落中嵌套一个图片，不添加vertical-align属性

代码：

<!doctype html>
<html>
     <head>
         <meta charset="utf-8"/>
         <title>this is a test file</title>  
     </head>
     <body>
         <p>test test<img src="self_info.png" alt="myself picture"/>test test</p>
     </body>
</html>

显示效果：

第二个: 我们试用一下 vertical-align 属性，设置 vertical-align:baseline;

代码：

<!doctype html>
<html>
     <head>
         <meta charset="utf-8"/>
         <title>this is a test file</title> 
         <style type="text/css">
            .test{
                vertical-align:baseline;
            }
         </style> 
    
     </head>
     <body>
         <p>test test<img src="self_info.png" alt="myself picture" class="test"/>test test</p>
     </body>
</html>

显示效果：可以看出默认情况下和 basline值下的显示效果是一致的；

第三个：上面使用baseline值，下面我们使用sub 和super看看，

sub：垂直对齐文本的下标；

super：垂直对齐文本的上标；

代码忽略，直接修改上面的 vertical-align : sub/super;

显示效果1（sub）：

显示效果2（super）：

第四个：我们再看看 top bottom middle 这三个的显示效果；

显示效果1（top）：把元素的顶端和行中最高元素的顶端对齐

显示效果2（bottom）：把元素的顶端和行中最低元素的顶端对齐

显示效果3（middle）：把元素放在父元素的中部

其余的几个值自行测试吧。。。。

cvper

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS vertical-align 属性的简单用法？

（测试环境：chrome）CSS vertical-align属性：设置元素的垂直对齐方式通过几个例子来看：第一个：正常情况下，我们在段落中嵌套一个图片，不添加vertical-align属性代码：&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; ...
复制链接

扫一扫