使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
来源：互联网 发布：淘宝保存的图片在哪里 编辑：程序博客网 时间：2024/05/14 01:09
解决这个问题有多种方法
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实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- 纯CSS实现未知高宽的图片在容器中水平和垂直居中
- css实现图片在div中水平和垂直居中(但图片宽高要小于div宽高)
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
- 纯css实现div中未知尺寸图片的垂直居中
- 子容器在父容器中水平和垂直居中的解决办法
- html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法
- 纯css实现未知尺寸图片在DIV中垂直水平居中（超简单）
- CSS样式，实现子标签在父标签中水平和垂直居中
- 实现未知尺寸的图片在固定区域内水平、垂直居中
- 解决未知大小图片在已知容器中垂直居中的三种方法
- css在未知高度的情况下实现垂直居中
- 让div在body中水平和垂直居中
- 使文字在div中水平和垂直居中
- 纯CSS 图片在DIV中垂直居中的显示方法
- 纯CSS实现垂直居中的几种方法
- 纯CSS实现垂直居中的几种方法
- Gson简要使用笔记
- 给VC6.0 装 XTToolkitpro 皮肤库 产生的问题解决
- android手机时间自动同步
- 算法洗脑系列（8篇）——第四篇 枚举思想
- Oracle SCN详解
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
- 提取出某日访问百度次数最多的IP
- 修改程序自动跳到dvd播放问题
- 异常
- nginx中事件模型中instance变量的处理细节
- MFC单选按钮应用
- 自定义分页控件
- 线性代数的一则数据加密应用
- 在linux下安装java
