vertical-align初步理解

css学习笔记<1>

接触前端差不多半年多，由一个java开发学习者转向前端开发学习，统统都是因为兴趣啊，目前正处于实习阶段，到了公司才发现，之前自学了大半年的知识只是小小的皮毛，即便做了2个项目也只是接触了前端的一小点，走出去才能发现世界之大、知识之无穷。开始学习总是希望能留下一点笔记，其中有一些只是知识点的摘抄性东西、一些是自己遇到了觉得做web会用到但是目前自己还不会的东西，可能顺序较为混乱，知识点较为混杂，希望慢慢成长，有所收获。

---

 vertical-align:设置元素的垂直对齐方式

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

值 描述 baseline 默认，元素放置在父元素的基线上 sub 垂直对齐文本的下标 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部[middle 元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐] bottom 把元素的顶端与行中最低的元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 text-bottom 把元素的底端与父元素字体的底端对齐 length % 使用line-height属性的百分比值来排列此元素，允许使用负值 inherit 规定从父元素继承vertical-align属性的值

对于基线的描述，从张鑫旭博客中盗了一张图，描述得挺生动形象，跟英语四格线似的。

vertical-align不止支持以上几种属性，也支持数值及百分数值，对于数值常常是用来修复单选框或者复选框与12像素文字大小不对齐；而百分比数值就跟表格的描述一样是相对line-height值决定的，跟之前的width/height的百分比数值相对于父块状元素的宽度值不同。
官方案例：

img.top {     vertical-align: text-top; }img.bottom {     vertical-align: text-bottom; }img.middle {     vertical-align: middle; }

起初只是在看公司框架时发现了这么一个没用过的属性，就初步了解了一下，由于自己没去用过，只是纯粹的看框架中如何使用vertical-align与在哪使用了，具体还是需要等之后接触后才能更深入理解。在写博客时特意再查了一下vertical-align，发现张鑫旭博客讲解了vertical-align,让我更加了解了vertical-align这个属性，果然就应该多看多学。

注意点：

1、vertical-align:middle属性的表现与否，仅仅与其父标签有关，所谓的与字体居中对齐只是错觉。

2、IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。

3、只有元素属于inline\inline-block（table-cell也可以理解为inline-block），其身上的vertical-align属性才会起作用，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

.col-xs-0,.col-xs-1{    display: inline-block;    zoom: 1;     vertical-align: top;    word-spacing: 0;     *display: inline; }

.col-xs-0,.col-xs-1{    vertical-align:top;//不起作用}

在使用vertical-align为默认baseline时发现了图片与背景颜色留有一层空隙。结合上面所说的baseline的元素是放在基线上，而基线就是x的下边缘，而字符高度是由行高所决定的，因此留有空隙。

<div class="ver">    <img src="../images/1.jpg" class="ima">    <span class="ver-font">xxxx进行vertical-align</span></div>

.ima{    /*display: block;*/}.ver{    background: #C46868;}.ver-font{    background: #e6e6e6;}

解决方法：

1、 因为vertical-align只对inline\inline-block，其属性才会起作用，因此让veritical-align失效或者将veriical-align取其他属性值；

2、修改line-height的值。

.ima{    display: block;}

.ima{    display: inline-block;    vertical-align: middle;}

.ver{    background: #C46868;      line-height: 5px;}

修改之后的效果图:

---

刚看到个图片运用vertical-align垂直居中的方法，记在这防止下次不懂得使用又忘记了。
通过使用font-size:0来解决vertical-align对齐基线的问题，此时content area高度是0，各种线都在高度为0的这条线上，绝对中心线和中线重合，自然就垂直居中了。

.ima{    display: inline-block;    vertical-align: middle;}.ver{    background: #C46868;      line-height: 300px;     font-size: 0; }

效果图：

对于vertical-align理解得还不全面，更多是通过他人的理解来获取一些要点，之后有机会有自身体会再来更新。