CSS技巧:如何使未知高宽的图片实现垂直居中

温柔的狼129

温柔的狼129

2016-01-29 11:41

CSS技巧:如何使未知高宽的图片实现垂直居中,本例介绍CSS使未知高宽的图片实现垂直居中的技巧,希望朋友们喜欢~~

在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。

直接上CSS代码:

#pic {
width:300px;
height:300px;
background-color:green;
border:6px solid #ccc;
text-align:center;
position:relative;
display:table-cell;
vertical-align:middle;
}
#pic p {
*position:absolute;
top:50%;
left:50%;
}
#pic p img {
*position:relative;
top:-50%;
left:-50%;
}

#pic是容器,里面放一个p容器,该容器采用绝对定位,最后插入图片,图片采用相对定位。

这里用到了一个hack,*只有IE浏览器可以识别,Firefox不认识

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
展开更多 50%)
分享

猜你喜欢

CSS技巧:如何使未知高宽的图片实现垂直居中

Html CSS布局 Div+CSS XHTML
CSS技巧:如何使未知高宽的图片实现垂直居中

CSS实现未知高度图文混合垂直居中

Web开发
CSS实现未知高度图文混合垂直居中

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS定高多行垂直居中

Web开发
CSS定高多行垂直居中

CSS教程:网页图片垂直居中的使用技巧

Web开发
CSS教程:网页图片垂直居中的使用技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页布局 CSS简单实现垂直居中

Web开发
网页布局 CSS简单实现垂直居中

用CSS实现文字垂直居中的代码

Web开发
用CSS实现文字垂直居中的代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS教程:自动隐藏网页文字的技巧

CSS教程:自动隐藏网页文字的技巧

源码学习:一个简单的日历控件(11)

源码学习:一个简单的日历控件(11)
下拉加载更多内容 ↓