vertical-align各个属性总结

最新推荐文章于 2024-03-11 20:25:07 发布

ISaiSai

最新推荐文章于 2024-03-11 20:25:07 发布

阅读量2.3k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ISaiSai/article/details/39521137

版权

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

vertical-align:

baseline：默认值，字母abcd的底部

text-bottom;文字底部，大概会和字母g的底部

middle:整体的中部

top：整个容器的顶部

bottom：整个容器的底部

super：上标的位置

sub：下标的位置,会比textbottom低一点(super 比text-top 低一点，原因不清楚)

数值：相对于baseline的高度，可以是负值，（经常用以修复 checkbox radio 与文字不对其问题，负值向下，正值向上）

<!DOCTYPE html>
<html>
<head>
<title>测试水平居中问题</title>
<meta charset="gbk">
<style>
.myDot {
height: 2px;
width: 2px;
background-color: #000000;
display: inline-block;

}
.container {
height: 30px;
border: 1px solid black;
line-height: 30px;
font-size: 12px
}
</style>
</head>
<body>
<div class="container">
我是在测试图片水平居中问题abcdefg
<span class="myDot" style="vertical-align: top"></span>
<span class="myDot" style="vertical-align: text-top"></span>
<span class="myDot" style="vertical-align: super"></span>

<span class="myDot" style="vertical-align: middle"></span>
<span class="myDot" style="vertical-align: baseline"></span>
<span class="myDot" style="vertical-align: text-bottom"></span>
<span class="myDot" style="vertical-align: sub"></span>
<span class="myDot" style="vertical-align: bottom"></span>
<span class="myDot" style="vertical-align: -2px;"></span>
</div>
</body>
</html>