×
CSS图片垂直居中方法整理
优畅主题 前端开发 2014-09-09 17:17 4,422 0 条评论

1.标准浏览器方法:

* {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 alt="CSS图片垂直居中方法整理"  src="http://www.idods.com/images/logo.jpg"  /></p></div>

 

2.标准浏览器下另类方法:

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 alt="CSS图片垂直居中方法整理"  src="http://www.idods.com/images/logo.jpg" /></p></div>

3.利用字体大小的方法:

.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 alt="CSS图片垂直居中方法整理"  src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"  />
</div>

4.display:inline-block 方法:

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 alt="CSS图片垂直居中方法整理"  src="http://www.idods.com/images/logo.jpg"  />
</div>

 


如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/919.html
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 JavaScript实现WordPress自由颜色主题切换 CSS样式中class和id的区别和含义 下一篇

7 + 5 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册