公告

更新

 

互联网 JS控件 按钮 黑色 灰色 白色 蓝色 绿色 黄色 橙色

> Css > 页面应用

未知高度图文混合排版的垂直居中
0
作者:vip_260     来源:未知     日期:2010-1-26 16:04:24     人气:      标签:

演示效果截图

未知高度图文混合排版的垂直居中

CSS代码

<style type="text/css">
body{ margin:0 ; padding:0; background-color:#333333; color:#FEFEFE;
font-size:12px; line-height:150%}
a { color:#FFF;}
.ver{width: 740px; background: #292928; border: 1px solid #6c6c6c;
margin: 30px auto;}   
.ver-center {background:#292928;text-align:center;display:table-cell;
vertical-align: middle; height: 400px; width: 740px;}   
.ver-center img { border: 2px #ffffff solid; padding:2px;}   
.ver-center .bli{ width: 500px; text-align: justify;
margin: 10px auto; display:block}   
.edge {width: 0; height: 100%; display: inline-block;
vertical-align: middle;}    
.container {text-align:center;width:100%;display:inline-block;
vertical-align: middle;}
</style>

HTML代码

<div class="ver-center"> <span class="edge"></span>
<span class="container">
  <h3>未知高度图文混合排版的垂直居中</h3>
  <img src="http://www.865171.cn/images/logo.gif" alt="DIV+CSS模板" />
  <span class="bli"><a href="http://www.v404.cn">www.v404.cn www.v404.cn
   www.v404.cn www.v404.cn www.v404.cn www.v404.cn www.v404.cn 
   www.v404.cn www.v404.cn www.v404.cn www.v404.cn www.v404.cn</a>
   </span> </span> </div>

效果演示/代码下载

在线演示
源码下载
Copyright 2008 网站频道 All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
     页面执行时间0.1719秒 查询数据库8次