2016.7.23 vertical-align的运用

　　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>

 

　　运行后效果：

 　　　　　　　　

　　老规矩，开始解释：

　　1、请观看以下一张图，这是正常状态下的样子，没设置任何的vertical

　　　　　　　　　　　　

　　2、请观看以下一张图，这是设置了vertial:55px的

　　　　　　　　

　　由此图得知，vertical-align:55px;很像margin-top：55px;但在这里margin-top:55px;很难实现类似这样的效果（不信你试试，不出现众多bug你跟我姓）。这个功能很实用，先记录，以后翻出来。

 

　　3、请观看以下一张图，这是设置了vertical-align:50%;

　　　　　　　　　　

　　　

　　由此观之，谷歌默认行高是18px，字体16px。行高的百分之五十就是9px。

 

　　vertical-align，我暂时介绍完了。

　　vertical-align的功能很多，我也不知道有多少，我知道一个，就是css初始化的时候，用vertical:middle可以清除掉img下面的3px空白缝隙。

　　各种大神如果有更好的建议，可以跟我一起探讨探讨。

 

转载于:https://www.cnblogs.com/huoan/p/5699121.html