css学习（三）多行文本的垂直居中和 img 与 div 存在空隙的解决

一、多行文本的垂直居中几种实现方式：

1、近似居中：

	    <div class="wrap">
		    <p>中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p>
		</div>

*{margin:0px;padding:0px}
		    .wrap{
			    width:200px;
				height:200px;  /***line-height:200px;和height一样，此处可省略***/
				border:1px solid red;
				margin:20px auto;
				line-height:200px;
			}
			.wrap p{
			    display:inline-block;
				line-height:1.6;
				vertical-align:middle;/***不加这个整个文本不是近似居中，而是靠上，只有最后一行近似居中；***/
			}

结果如下：

2、行盒最后增加一个font-size:0；属性的行内元素；

<div class="wrap">
	<img src="222.jpg">
	<i>&nbsp;</i>
</div>

*{margin:0px;padding:0px}
		.wrap{
		    height:138px;
			width:600px;
			margin-top:20px;
			border:1px solid red;
			line-height:138px;/**和伪元素一样，行高不能指定这里**/ 
	/***如果指定了行高，而且此行高>=行盒中各个内联元素的最高值的时候***/
	/***既为指定了此行盒的基线，行盒中所有元素对齐则参照这个基线***/
		}
		.wrap img{
		    vertic