一点感悟

曾子曰:”吾日三省吾身”, 意思就是说每天要多次想一想自己到底干了什么 O(∩_∩)O~。好吧，这个其实大家都知道，那为什么还要在这里扯呢？很简单，就是知道的人很多，但做到的人很少。结合自己的工作经验，谈谈前端开发的一些认识误区：

• 只知其然，不知其所以然；
• 解决过的问题，下次同样还是忘记，要查找相关的资料；
• google，百度一个方法，实现了就可以了；

这些认识的误区，我相信很多人（包括我自己）都会犯，原因是多种多样的：

• 项目有时候确实很急，我们没有时间来捣鼓这些东西；
• 哎，以后遇到再找资料好了，反正自己已经知道怎么查找关键字了；
• 我去，哥（姐）还要和女（男）盆友去逛街呢，没空搞这些细节；
• ……

总结原因，那就是对技术的专注度不够，没有热情往纵深的方向去挖掘。有人可能会反驳了: “擦，css就那些有限的的属性，感觉没什么好学的”（ps：自己以前就是报这种态度的，惭愧）。其实这是正确的吗？css其实是很精深的一门学问，别看只有一些属性，但属性的各种值，属性之间的搭配，属性之间的差异……，还有浏览器不同的表现，这些都了解清楚了吗？我们常常在感慨为什么别人会实现一些很好的效果出来，会提出很好的解决方案，其实就是因为他们对属性，属性值了解得很透彻，知道怎样的搭配能产生怎样的效果。所以，骚年们，如果想在前端有些进步，好好静下心来学习吧。专注，实践，学习，归纳

本文是css学习总结的开篇之作，也是我最近感悟的一些总结，希望对您有一些思考吧，废话什么的就不多说了。

本文地址: http://forkme.info/element-vertical-align/或者http://www.cnblogs.com/blackmanba/p/element-vertical-align.html, 转载请注明源地址。

开始

最近在捣鼓页面的时候遇到一个问题，如何实现文字与图片的垂直居中？如图：

其实这个问题网上答案一大堆，很多同行也都有自己的各种解决方法，下面查找资料再经过自己实验总结的方法，会着重介绍优缺点。说了这么多，接下来就是展示最终的显示效果，如果不知道效果是什么的话，请点击我思密达

1. inline-height法

这种方法相信很多人都知道并且尝试过，主要是利用inline元素（或者inline-block元素）的inline-box模型（ps：这个可以查看@旭哥的文章拜拜了,浮动布局-基于display:inline-block的列表布局，原理什么的旭哥都讲得很清楚了，这里就不要再瞎子点灯——多此一举了）, 只要设置inline-heigth的值和父元素的height一致即可让文字居中显示，样式如下：

.inline {
	display: inline;
	*display: inine;
	zoom: 1;
}
.lg{
	font-size: 18px;
	font-weight: bold;
	line-height: 80px; /* 注意：line-height和容器的高度一致 */
}

最终效果图上面已经截过，这里就不再搞多一张了，免得浪费亲们宝贵的时间。 O(∩_∩)O~，
最终效果请点击这里查看,
源代码在可以在开发者工具中查看, 下同。

1.1 优点

• 简单，使用很少的样式就可以实现；
• 兼容性强，兼容IE6+, chrome和Firefox（opera没试过）

1.2 缺陷

• 只能用于单行文字，多行文字间距过大，效果请点击；
• 要知道父容器高度，如果不想定死高度的话只能通过javascript获取并设置，复杂度增大；
• line-height只能适用于inline和block级别的元素；

1.3 总结

line-height让文字垂直居中这个方法对于单行文字来说那是再好不过，不用理相邻元素是什么，图片啊，文字啊什么都妥妥的没影响。经过之前一段时间的使用，可以说效果不错。当然，如果您的需求是多行文字或者是做自适应布局的话，建议不要用这个方法，因为~~~~不适合。%>_<%

2. 采用absolute+margin:auto

这个方法涉及到一个概念，就是margin属性的属性的定位问题，绝对定位的元素在填充的时候会根据自身的高度和margin值来决定最终位置。如果什么都木有设置，默认就是填充整个父容器，尺寸固定就会通过margin来决定最后的位置。概念什么的比较绕，我们可以点击这里查看最终结果，css如下：

.parent {
	position: relative;
}
.abs {
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
	    margin: auto;
	    height: 20%;
}

2.1 优点

• 简单
• 文字多的话，兄弟元素也能对应居中，不管兄弟元素是什么，效果请点击
• 适应性强，父容器不用限死高度

2.2 缺陷

• IE6,7 不兼容

2.3 总结

这个方法对于不用兼容IE6, 7的应用来说是十分高效并且实用的，在实际项目的使用中并不推荐这种用法，因为绝对定位脱离了文档流，会带来一些维护上的问题，并且也不利于重用。当然，这一切都是权衡，综合考虑开发和维护成本后，如果觉得合适，就可以采用。

3. 采用display: table-cell

这个方法使用到了table-cell来布局，其实table-cell，顾名思义就是单元格，设置了table-cell的元素其实和传统的td标签效果是一致的，最终效果请点击这里，代码如下：

.cell {
    display: table-cell;
    height: 80px;
    vertical-align: middle;
}

3.1 优点

• 简单，高效
• 适应性强

3.2 缺点

• IE6,7 不兼容（如果是图片居中可以使用font-size，文字不可以）
• 容器高度固定，设置overflow: hidden 会导致文字不显示
• 文字撑开兄弟元素不居中，效果

3.3 总结

使用table-cell的方式总体来说是不错的解决方案。当然，缺点也很明显，见上面。根据具体情况具体分析使用即可

4. 采用inline-block 方法

这个方法是目前为止我个人觉得最好的方法。原因很简单：简单易懂，容易上手，兼容性强。此方法本质上是利用了inline-block的垂直居中对齐特性。废话不多说，请点击我。不想看效果的童鞋可以直接看代码，如下

.inline-block {
	    display: inline-block;
	    *display: inline;
	    zoom: 1;
	    vertical-align: middle;
}

4.1 一点小结

此方法没有什么好说的，无论是兼容性还是其他特性都能完美呈现，并且不必知道文字高度，对于高度超过图片的文字也能够完美适应。真要说不好也就是先要理解inline box模型（ps：⊙﹏⊙b汗，有硬想缺点的嫌疑）。

5. 采用button 方法

这个方法是无意中看到的，其实原理很简单，但很有创意。那就是利用控件的特有属性。button标签就是这样的一个例子，因为其特性，我们就可以利用它来实现对应的效果了。请点击我。代码如下：

<button>
	<a href="#" class="inline-block w60p verticalmiddle" style="text-align: left;">盛松成：中国信贷结构继续改善</a>

	<img src="http://jsfiddle.qiniudn.com/news3.png" alt="news" class="fn nomargin verticalmiddle">
</button>

5.1 优点

• 利用button本身的属性，简单明了，甚至可以不用写css
• 扩展性好，能根据文字高度自适应

5.2 缺点

• 典型的为了效果使用标签，可维护性低
• 不满足标签的语义化，对搜索引擎不友好

结语

本文算作是自己前端开发的一个开端，主要是对自己知道的方法的总结和思考，并写成文章方便自己以后查阅。希望对您的学习有所帮助。随时欢迎交流意见，请在下方评论，多多益善!!