DIV中图片垂直居中的css样式
来源:互联网 发布:青岛25日网络问政 编辑:程序博客网 时间:2024/04/30 07:23
众所周知,图片的水平居中比较简单,但是图片的垂直居中比较麻烦一些,今天查阅了资料并自己写了测试代码,来实现兼容IE,FF,chrome等主流浏览器的图片在div中的垂直居中的方法。
css样式代码如下:
<style type="text/css">
*{
margin: 0;
padding: 0
}
div {
width: 210px;
height: 210px;
}
.attention {
color: red;
font-weight: bold;
}
.example1 {
background: blue;
}
.example2 {
background: green;
display: table-cell;
vertical-align: middle;
}
.example2 img {
vertical-align: middle;
}
.example3 {
background: yellow;
display: table-cell;
vertical-align: middle;
*font-size: 183px;
}
.example3 img {
vertical-align: middle;
}
</style>
*{
margin: 0;
padding: 0
}
div {
width: 210px;
height: 210px;
}
.attention {
color: red;
font-weight: bold;
}
.example1 {
background: blue;
}
.example2 {
background: green;
display: table-cell;
vertical-align: middle;
}
.example2 img {
vertical-align: middle;
}
.example3 {
background: yellow;
display: table-cell;
vertical-align: middle;
*font-size: 183px;
}
.example3 img {
vertical-align: middle;
}
</style>
然后html代码如下:
<h3>图片在div中正常显示,例子中div的尺寸均为210px*210px,图片为210px*158px</h3>
<p class="attention">这里为了专门验证DIV中的图片垂直居中,特地将DIV的宽度设置成同图片宽度一样;图片的水平居中较简单,可以设置div{text-align:center}</p>
<div class="example1">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/>
</div>
<h3>图片在div中居中显示,设置div{display:table-cell;vertical-align:center} div img {vertical:middle}</h3>
<p class="attention">在IE8,chrome18,firefox12下测试通过,IE6/7均不通过</p>
<div class="example2">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/>
</div>
<h3>图片在div中居中显示,设置IE hack,加上一句 *font-size:183px来hack</h3>
<p class="attention">183 = 210*0.875,为什么乘这个0.875,原理不知,有待补充,目前由前人经验得来。IE6/7也能通过。</p>
<div class="example3">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/></div>
<p class="attention">这里为了专门验证DIV中的图片垂直居中,特地将DIV的宽度设置成同图片宽度一样;图片的水平居中较简单,可以设置div{text-align:center}</p>
<div class="example1">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/>
</div>
<h3>图片在div中居中显示,设置div{display:table-cell;vertical-align:center} div img {vertical:middle}</h3>
<p class="attention">在IE8,chrome18,firefox12下测试通过,IE6/7均不通过</p>
<div class="example2">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/>
</div>
<h3>图片在div中居中显示,设置IE hack,加上一句 *font-size:183px来hack</h3>
<p class="attention">183 = 210*0.875,为什么乘这个0.875,原理不知,有待补充,目前由前人经验得来。IE6/7也能通过。</p>
<div class="example3">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1FOl6XghEXXcn5fYb_094058.jpg_210x210.jpg"/></div>
有问题可以给我留言!
- DIV中图片垂直居中的css样式
- CSS+DIV调整图片样式垂直居中
- 图片在div中垂直居中的css
- /CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- CSS Div图片垂直居中的方法
- Div+css 图片垂直居中
- DIV CSS 图片垂直居中
- Div+CSS图片垂直居中
- div中图片垂直居中的方法
- div中图片的处理-居中垂直
- div内的元素垂直居中css样式
- css样式控制div内容垂直居中
- DIV中图片垂直居中
- div+css中如何让图片垂直居中显示
- CSS图片在DIV中水平垂直居中
- css的div垂直居中
- javascript中的数组
- 在VC++中调用存储过程
- 本地存储在IE下面的编码问题及解决方法
- CSS代码编写顺序推荐
- DOCTYPE标签与浏览器模式——标准模式、混杂模式
- DIV中图片垂直居中的css样式
- phpMyAdmin的安装和配置
- js判断IE6,IE7,IE8
- 【转】margin-bottom在IE6和IE7下失效的解决办法
- 用css来设置table的border
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- git寻根——^和~的区别
- 绘制圆
- linux下批量转换扩展名