CSS实现图片垂直居中
2015-11-19 11:48
507 查看
难点在于两点:
1.垂直居中;
2.图片是个置换元素,有些特殊的特性。
CSS简单的解决方法:
.box {
width:200px;
height:200px;
border: 1px solid #eee;
/*非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编码*/
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
1.垂直居中;
2.图片是个置换元素,有些特殊的特性。
CSS简单的解决方法:
.box {
width:200px;
height:200px;
border: 1px solid #eee;
/*非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编码*/
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
相关文章推荐
- 基本的九宫格Css布局,用于圆角
- CSS3 box-align 属性
- Webkit Flex伸缩盒模型
- CSS背景图拉伸自适应尺寸
- DIV CSS3 text-shadow字体阴影
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
- css 文本缩进 input label 块级元素
- Webkit之CSS基础介绍
- Webkit之理解CSS实现
- js获取css样式(内联,内嵌,外部)
- css3实现钟表特效
- 【南大软院大神养成计划:第三天】与CSS度过的充实的一天(二)
- CSS3画图2
- css盒子模型part3
- 【南大软院大神养成计划】html+css之网页布局
- CSS.DIV网页样式与布局学习总结
- 个人博客三栏css实践
- CSS利用checkbook实现开关按钮
- HTML和CSS常用标签