您的位置：首页 > 其它

vertical-align各个属性总结

2014-09-24 11:34 162 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航