首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

div中内容跟img垂直居中方法

2013-08-23 
div中内容和img垂直居中方法style.box{width:300pxheight:300pxtext-align:centerposition:relative

div中内容和img垂直居中方法

<style>.box{    width:300px;    height:300px;    text-align:center;    position:relative;    overflow:hidden;    display:table-cell;    vertical-align:middle;}.box .mid{    width:300px;    position:static;      +position:absolute;      top:50%;    left:0;    text-align:center;}.box .inner{    position:static;    +position:relative;    top:-50%;    vertical-align:middle;}</style><div style="border:1px solid blue;">    <div style="border:1px solid red;">                垂直居<br />垂直居中<br />垂直居中        </div>    </div></div>    <div style="border:1px solid blue;">    <div class="mid">        <img class='inner' src="images/nav2.png"/>    </div></div>

热点排行