您的位置：首页 > Web前端 > CSS

CSS之vertical-align之野史篇（超越官网的教程）

2016-12-31 21:52 651 查看
我相信大家一定都在Css的官网上看过这个属性，也看了官网上的一个例子。官网上展示的是一个兔子图片和一行文字对齐的故事。但是，我也相信很多人和我一样，看完官网的例子依然没有彻底弄清这个属性到底该怎么使用。

于是，我自己写了下面的几个小例子，我就彻底明白了这个属性的用法。

vertical属性有以下的值：top和text-top；其他的值雷同，就不一一列出。

在介绍这两个值的含义之前，我们要先明白vertical-align这个属性用在什么场合，也就是能用在什么元素上。对此，我总结如下：它只能用在行内块元素上。至于为什么是行内块元素呢？这里我就不揭示了，等你会用了，我想你就能明白是问什么了。

那下面来说明top和top-text的含义：

top是说，行内块元素的顶端和父元素最高的元素顶端对齐。

top-text是说，行内块的元素和父元素中文本的顶端对齐。

下面的代码，动手试试你就能明白：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
.div{
width: 800px;
height: 400px;
margin: auto;
border: solid 1px;
}
.div1{
display: inline-block;
width:40px;
height: 200px;
background-color: black;
}
.div2{
display: inline-block;
width: 20px;
height:5px;
background-color: blue;
vertical-align: text-top;
}
.div3{
display: inline-block;
width: 20px;
height:5px;
background-color: green;
vertical-align: top;
}

</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<span>这是一段文字</span>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>


其效果如下所示：



其中，蓝色的小长块表示的是和文本的顶端对齐，绿色的小块表示的是和父元素中最高元素即黑色长方块元素的顶端对齐。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vertical align css
相关文章推荐
新的分享
章节导航