2017.9.15 垂直居中的方法

1.vertical-align

首先要理解vertical-align的特性

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

定义解析：

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

vertical-align 首先定义的对象是  行内元素  行内元素当然也包括行内块级元素

行内元素对于该元素所在的基线  垂直对齐  

vertical-align

该元素所在基线  第一种是和父元素的基线的对比   第二种是和同级行内元素的基线对比对齐

例如

.a{height:100px;line-height:100px;}

<p   class=”a”> 

<img/>

</p>      

这样p标签的基线在内部框的中间   <img/>对于他在的父元素p标签的基线实现垂直居中对齐  加一个vertical-align:middle  就可以实现了

这是行内元素的垂直居中对齐方法

基线分为

所以  vertical-align想要有效果 所以必须有参考基线  当父元素有了  line-height定义后  子元素可以使用  vertical-align  所以

.e{width:600px;height:200px;background:red;line-height:200px;}
img{vertical-align:middle;}

 <div class="e">
    <img src="../images/bg1.png" />aaaaaaaaaaaaaaaaaaa
    </div>

作用环境：父元素设置line-height。

作用对象：子元素中的inline-block和inline元素。

所以 但是这个特性只针对行内元素有效果  如果是行内块级元素就无法实现该效果

但是利用表格元素的特性 我们可以简介实现  垂直居中对齐

看表格的特性

代码和效果如下  可以看出来表格内的元素自动垂直居中

1. <table  height="100px">
2.         <tr>
3.             <td>
4.                 aaaaaaaaaaaaaaaaaaa
5.             </td>
6.         </tr>
7.     </table>

我们可以用  display：table  讲块级元素转化为表格  模仿表格

代码如下

1. .a{width:500px;height:300px;background:red;display:table;}
2. .b{display:table-cell;vertical-align:middle;}
3. 
   
4. <div class="a">
5.         <div class="b">
6.             <img   src="../images/bg1.png"/>  
7.         </div>
8.         aaaaaaaaaaaaaaaaaaaa
9.     </div>

可以看出 我在class  b下面写了一排文字aaaaaaaaaaaa   tr的高度被图片的告诉撑开  所以默认行高就是图片的告诉

aaaaaaaaa他在屏幕中显示的效果是hi    上下居中

说明  在我们 class  a 的   display=table   就相当于  line-height：上下居中

然后再在  tr中写   vertical-align   将内容与父元素的基线对齐

因为表格中可以放 块级元素和行内元素  所以这种方法适合任何元素的垂直居中

    

这种方法的使用要求

关于作用环境——

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

• 所谓inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
• 对inline元素设置vertical-align是有作用的，只是要重新设置line-height的值，否则继承了父元素的line-height只能垂直居中。

 

例一：inline元素作为父元素可以不设置line-height，字体会撑起一个适合子元素作用的高度。小白点可以各种对齐。

<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>.box{background:black; color:white; padding-left:20px;} .dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}

 

 

例二：div父元素必须设置line-height，否则对其设置vertical-align无效，图片不会在绿色框里动~

<div class="outerbox"><img src="C:\Users\Administrator\Desktop\test.jpg"/><span>这是外层元素的内部文字</span></div>.outerbox{width:300px; line-height: 300px;font-size: 16px; }.outerbox img{width: 30px; height:30px; vertical-align: bottom;}.outerbox span{vertical-align: top;}

 

对文字设置vertical-align:top 无效是因为文字继承了父元素的line-height，导致文字居中，要想vertical-align起作用，可在该元素上设置line-height小一些覆盖父元素。

 

 

这个作用要求是抄的  http://blog.csdn.net/diudiu5201/article/details/54666809

可以看下借鉴的文章

第二中就是行内元素之间的基线对齐

这个时候的参照物就由父元素的基线变为  同级元素的基线   

二、当父元素没有设置line-height时，inline/inline-block子元素之间对齐。

• 当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素。
• 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐。

 

例：黄色的线为图片中垂线。

<div style="height:200px"><img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" style="width:50px;vertical-align:middle;"><span style="vertical-align:middle">hahahahhah</span></div>

 

只设文字的vertical-align，则文字的中线对齐图片底线

只设图片的vertical-align，则图片的中线与文字的基线对齐

 

两个的vertical-align都为middle，则两个的中线互相对齐

 

我们利用这个特性 可以使用以下几种方式实现行内元素的对齐方式  我们都拿图片举例

第一种  参照物是<span></span>标签   

.c{width:600px;height:200px;background:red;}
.d{height:100%;vertical-align:middle;display:inline-block;margin-right:-5px;}
.c img{vertical-align:middle;}

<div  class="c">
    <img src="../images/bg1.png" />
        <span class="d"></span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>

可以看到效果是这一排全部垂直对齐 但是用span标签是可以看到后面的行内元素与图片之间有间隙的

可以考虑用-margin解决

第二种参照物是背景图片

.f{width:600px;height:200px;background:red;}
.g{height:100%;vertical-align:middle;width:0;}
.h{vertical-align:middle;margin-left:-5px;}

<div  class="f" >
    <img   class="g"  src="../images/bg1.png" />
    <img    class="h" src="../images/bg1.png" />
    </div>

这个图片与左边有间隙  也可以用  margin：-5px；解决

vertical-align的垂直居中方法 大致分为两类

现在运用定位的办法解决

代码如下

.a1{width:600px;height:200px;background:red;position:relative;}
.a1 img{position:absolute;top:0;bottom:0;margin:auto;}

<div  class="a1">
    <img src="../images/bg1.png" />
    </div>

这种方法的弊端是  父元素使用相对定位  还在文档流当中    但是子元素使用绝位定位   已经脱离文档流   父元素内如果要添加文本就会覆盖或者被绝对定位元素隐藏

这要注意图层顺序   但是他可以使用块级元素或者行内元素

行内元素是没有宽高的 但是像img这样的行内块级元素有其素有的宽高属性  可以写宽高  这是置换元素区别于其他行内元素的地方

用margin的负值  但是我试了图片 

发现没用

.b1{width:600px;height:200px;background:red;}
.c1{height:50%;width:600px;}
.d1{margin-top:-75px;width:200px;height:150px;background:blue;}

<div class="b1">
    <div class="c1"></div>
    <div class="d1"></div>
    </div>