* {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px } <div><p><img src="http://www.idods.com/images/logo.jpg" alt="CSS图片垂直居中方法整理" /></p></div>
body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } <div><p><img src="http://www.idods.com/images/logo.jpg" alt="CSS图片垂直居中方法整理"/></p></div>
.box { display: table-cell; vertical-align:middle; text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px; *font-family:Arial; width:200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; } <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="CSS图片垂直居中方法整理" /> </div>
div { display:table-cell; height:300px; width:500px; text-align:center; border:1px solid #000; vertical-align:middle } <!--[if IE]> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } <![endif]--> <div> <img src="http://www.idods.com/images/logo.jpg" alt="CSS图片垂直居中方法整理" /> </div>
拥有多年WordPress博客/企业建站开发经验,独树一帜的设计,提供最专业的网站设计方案;原创的主题标签语义化,增强网站优化效果。
增强用户体验、提高品牌形象给人留下深刻的印象,那就选择我们,我们的每一款主题都是独一无二的,都有自己的灵魂,每款主题都有各自的配色方案。
遵循现代网页设计的趋势,所有主题都提供完整的响应式布局,优化大桌面显示器以及对平板和智能手机的支持,从而提供一致性的用户体验。
长期及时地在线售后服务和免费升级更新,确保您的网站始终运行在最佳状态,24小时QQ在线的沟通方式免去您的后顾之忧,替您节省网站维护成本。
目前还没有评。