使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
解决这个问题有多种方法
1.使用css hack 处理ie6下的问题。
2.嵌入其它标签使其垂直居中。
方法一：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align: middle; /*设置水平居中*/
text-align: center; /* 针对IE的Hack */
*display: block;
*font-size: 175px; /*约为高度的0.873，200*0.873 约为175*/
*font-family: Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
width: 200px;
height: 200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align: middle;
}
<div class="box">
<img src="http://hiphotos.baidu.com/jijialong/pic/item/174b99ff9511937a4e4aea71.jpg" />
</div>
这种写法可以实现，有一种情况是："box"如果是浮动元素的话{float：left}，这个方法就不灵验了！
可以给img标签外加一个容器，和浮动float就木有关系了。
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table;
text-align: center; /* 针对IE的Hack */
width: 200px;
height: 200px;
border: 1px solid #eee;
}
.box span{
display:table-cell;
vertical-align:middle;
}
<div class="box">
<span><img src="http://hiphotos.baidu.com/jijialong/pic/item/174b99ff9511937a4e4aea71.jpg" /></span>
</div>
方法二：
<style type="text/css">
.miao {
width:500px;
height:220px;
line-height:220px;
border: 1px solid;
text-align: center;
}
.miao img {
vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.miao span {
border: 1px solid red;
height: 100%; /* 要保证和父元素高度一样才行 */
writing-mode: tb-rl;
vertical-align: middle;
}
</style>
<![endif]-->
<div class="miao"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" />文字部分去掉，图片受影响</div>
如果把文字去掉的话，图片不会垂直居中。
此种方法图片的垂直居中是以“基线”垂直居中，因为line-height的存在，图片默认的基线是底部,img需要给一个属性vertical-align:middle;
方法三：
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
<div class="img_v">
<p><img src="http://www.okajax.com/images/logo.gif"></p>
</div>
方法四：
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>
<![endif]-->
<div class="miao">
<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
方法五：
<!DOCTYPE html>
<style type="text/css">
<!--
* {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
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
方法六：
<style>
<!--
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
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>
方法七：
<style>
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
方法八：
<style>
* {margin:0;padding:0;}
div {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*>div{
font-size:12px
}
div img {
vertical-align:middle
}
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div>
方法九：
<style>
div {
display:table-cell;
height:300px;
width:500px;
text-align:center;
border:1px solid #000;
vertical-align:middle
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<div>
<i></i>
<img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>
了解了才知道 上边写的都是什么啊 ， 之后抽个时间修改一下
使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？相关推荐
- css未知尺寸的图片的水平和垂直居中
纯CSS实现未知尺寸的图片水平和垂直居中.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vert ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.&quo ...
- 纯CSS实现非常好看的图片轮播演示
简介: 这是一款使用纯 CSS 实现的非常好看的图片轮播/幻灯片,切换方式为淡入淡出 网盘下载地址: http://kekewangLuo.cc/5ZtqYb6bqd60 图片:
- css img 适配尺寸_img图片自适应布局_HTML5教程_郭隆邦技术博客
图片自适应布局 源码下载 使用百度图片搜索的时候,可以看到搜索页面,所有的图片基本都是定高度显示,图片的宽度随着高度等比例缩放.点击搜搜页面的每一张图片, 可以跳转到一个页面只有一张图片,显示的尺寸是 ...
- 通过纯CSS实现文字前添加图片
纯CSS添加图片 <ul id = "nav"><li><a href="#">Home</a></li& ...
- php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
- JPG图片的高宽解析．
以后都要悬梁刺骨,发奋图强了. 记载自己的学习,工作,成长,感悟. #if 1 char buff_filename[FILE_LEN]; FILE *fp; ...
- 图片垂直居中的使用技巧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 < ...
最新文章
- Ubuntu下安装JDK步骤
- ActiveReports 报表应用教程 (15)---报表换肤
- C++包含头文件尖括号和双引号的区别
- 服装ERP管理软件有哪些功能
- linux打开九针串口,RS232 9针串口定义
- PHP获取客户端IP地址方式
- 登录验证码(前后端分离、不分离)
- js 经纬度坐标转换
- the little schemer 学习
- 经济学人The Economist学习（笔记词汇）Day1
- duilib设置透明窗口_Facebook-duilib 仿 半透明登陆窗口, 简单示例程序，模仿 实现 。 DirextX 240万源代码下载- www.pudn.com...
- 评价页面html代码,HTML5 评论列表界面模板
- SpreadJS 纯前端表格控件应用案例：金融业数据智能分析平台
- 用 pc 抓取 vlan tag 的数据包
- factory-method
- 软考高项之相关公式笔记
- Linux —— 线程安全
- 初识kotlin（初用kotlin一时爽、一直用一直爽）
- Android播放流媒体视频
- vscode开发wdk