2016.7.23 vertical-align的运用

时间：2016-07-23 18:11:53 阅读：139 评论：0 收藏：0 [点我收藏+]

标签：

　　vertical 垂直

　　align 对齐

　　vertical-align 垂直对齐(方式)

　　vertical-align只能在block-inline和inline下能使用，在block下是不能使用的。

　　vertical-align只作用于行内元素

　　vertical-align有top、text-top、middle、baseline、bottom、text-bottom、sub、super、inherit、数值、百分比等属性。

　　光看是看不懂的，我写了一串代码，我们来研究下（inherit是继承父级，在这里不演示，数值和百分比在最后演示，不写在这串代码里）

　　一、vertical-align:top、text-top、middle、baseline、bottom、text-bottom、sub、super。sub和sup。

　　css代码：

　　　　　　　img{
                width: 101px;
                height: 75px;
            }
            span{
                width: 201px;
                /* width:101px; */
                /* 当宽度为101px时，字体就会两行，vertical:text-top;和vertical:text-bottom;对齐的是第二行的字 准确的说是对齐最后一行的字*/
                height: 55px;
                background: yellow;
                display:inline-block;
            }
            .top {
                vertical-align: top;
            }
            .text-top {
                vertical-align: text-top;
            }
            .middle {
                vertical-align: middle;
            }
            .baseline {
                vertical-align: baseline;
            }
            .text-bottom {
                vertical-align: text-bottom;
            }
            .bottom {
                vertical-align: bottom;
            }
            .sub{
                vertical-align:sub;
            }
            .super{
                vertical-align:super;
            }
            .normal{
                display:inline;
                background:#fff;
            }

　　body代码：

　　　　　　　这个是<img src="1.png" class="top"><span>top 顶部</span><br><br>
            这个是<img src="1.png" class="text-top"><span>text-top 文本上标</span><br><br>
            这个是<img src="1.png" class="middle"><span>middle 中部</span><br><br>
            这个是<img src="1.png" class="baseline"><span>baseline 基线</span><br><br>
            这个是<img src="1.png" class="text-bottom"><span>text-bottom 文本下标</span><br><br>
            这个是<img src="1.png" class="bottom"><span>bottom 底部</span><br><br>
            这个是<img src="1.png" class="sub"><span>sub </span><br><br>
            这个是<img src="1.png" class="super"><span>super </span><br><br>

             sub:<span class="sub normal">x</span>2     &nbsp;&nbsp;
             super:<span class="super normal">x</span>3 &nbsp;&nbsp;
             H<sub>2</sub>O                      &nbsp;&nbsp;
             y<sup>2</sup>                       &nbsp;&nbsp;

　　运行后的效果：

　　技术分享

　　是不是感觉看蒙了呢？慢慢看下去，我逐步剖析下，估计你们就懂了。

1、请观看放大后的两张图片，可知text-top、text-bottom、top、bottom四个属性

技术分享

由上两张图片可知，text-top和text-bottom是对应文字的顶部和底部，top和bottom是对应同级元素（span）的在顶部底部。

2、请观看下面一张图片，可知baseline的作用

技术分享

由上此图可知，baseline是对应文字的基线。基线一般是英文字母的底部。（小时候写英文字母，四行线，基线就是第三行）

3、请观看下面一张图片，可知middle的作用

技术分享

由上可知，w3c说的中线对齐我没理解，这里我也不知道怎么解释，照搬w3c的解释吧。“把此元素放置在父元素的中部”，博客园里皆大神，如果知道这个vertical-align:middle;的具体用法时，一定千万要告诉我哟，我会感激不尽的。

4、请观看下面一张图片，可知vertical-align:sub和super的作用，也可知道sub标签和sup标签的作用

　　　　　　　　　　技术分享

由上可知，sub和super的作用了。

二、vertical-align:数值、百分比;

　　css代码：

　　　　　　　img{
                width: 101px;
                height: 75px;
            }
            span{
                width: 201px;
                /* width:101px; */
                /* 当宽度为101px时，字体就会两行，vertical:text-top;和vertical:text-bottom;对齐的是第二行的字 准确的说是对齐最后一行的字*/
                height: 55px;
                background: yellow;
                display:inline-block;
            }
            .v55px{
                vertical-align:55px;
            }
            .v50{
                vertical-align:50%;
            }

　　body代码：

　　　　 这个是<img src="1.png"><span>正常的</span><br><br>
        这个是<img src="1.png" class="v55px"><span>55px</span><br><br>
        这个是<img src="1.png" class="v50"><span>50%</span><br><br>