图片垂直对齐css文字与图片垂直对齐的方法，我们使用了一个属性，有需要的同学可以参考一下下哦。
本文章介绍了关于
| 代码如下 |
|
|
<div class="demo-container">
<!--************************************* 实例代码开始 *************************************-->
<style type="text/css">
a img { border:0; }
/*
说明：IE 6 下 DIV 垂直居中对齐
来源：CssPlay [ http://www.cssplay.co.uk ]
整理：CodeBit.cn [ http://www.codebit.cn ]
*/
.fixVerticalCenterOuter{
width:300px;
height:200px;
border:1px solid #ccc;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/* for IE 6 */
* html .fixVerticalCenterAdd {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
* html .fixVerticalCenterInner{
vertical-align:middle;
display:inline-block;
}
</style>
<div class="fixVerticalCenterOuter">
<span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd -->
<span class="fixVerticalCenterInner"><a href="http://www.hzhuti.com"><img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="CodeBit.cn - 聚合小段精华代码" /></a></span><!-- // fixVerticalCenterInner -->
</div><!-- // fixVerticalCenterOuter -->
<br /><br />
<div class="fixVerticalCenterOuter">
<span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd -->
<span class="fixVerticalCenterInner"><a href="http://www.111cn.net">111cn.net</a></span><!-- // fixVerticalCenterInner -->
</div><!-- // fixVerticalCenterOuter -->
<!--************************************* 实例代码结束 *************************************-->
</div>
|
