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

2016-01-29 11:41 78 1 收藏

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

【 tulaoshi.com - Html 】

在一个容器里再定义一个绝对定位的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不认识

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1482978.html

延伸阅读
标签: Web开发
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" lang=&quo...
标签: Web开发
经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/ht...
做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便...
标签: Web开发
div style="position:absolute; top:50%; left:50%; margin:-200px 0 0 -275px; width:550px; height:400px"内容。图片文字flash等。请注意,div宽度高度以及margin负值需针对内容进行相应设置/div 说明: 绝对定位div position:absolute; 顶部和左边距 top:50%; left:50%; 使用外补丁 margin 负值,负值大小为层自身高度宽度各除以二 margi...
标签: Web开发
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持...

经验教程

231

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部