如何在html盒子中将图片居中,css3怎么使div图片居中?
在网页中我们多使用css+div进行布局,我们通常会将图片放在div中,那么该如何让图片在DIV盒子里水平居中。下面我们来看一下css设置图片在div中居中的方法。
css3使div图片居中的方法:
1、利用display:table-cell,具体代码如下
html代码
css代码.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}
效果如下:
2、采用背景法:
html代码
css代码.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
background: url(wgs.jpg) no-repeat center center;
}
效果如下
3、图片外面用个p标签,通过设置line-height使图片垂直居中:
html代码
css代码*{margin: 0px;padding: 0px}
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
text-align: center;}
.img_wrap p{
width:400px;
height:300px;
line-height:300px; /* 行高等于高度 */
}
.img_wrap p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
效果图如下:
如何在html盒子中将图片居中,css3怎么使div图片居中?相关推荐
- html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
- html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS
CSS3 filter(滤镜) 制作图片高斯模糊无需JS 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽的一B!!!起 ...
- html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
- html如何将div居中置顶层,CSS如何使DIV层居中
如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明 ...
- c语言静态图片做成动态效果,如何使静态图片做成动态效果?怎么让静态图片动起来...
原标题:如何使静态图片做成动态效果?怎么让静态图片动起来 如果用手机拍了一组张片,想要将这些静态图片合成动态的该怎么操作呢?将多张图片合成一张gif动图的方式,既能够占据更少的内存,还能够提升图片的趣 ...
- html怎么将图片水平翻转,CSS3中如何实现图片翻转
今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能,CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现 [推荐课程:CSS3教程] 案 ...
- css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图 二. 原理讲解 这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...
- CSS3 实现六边形Div图片展示效果
二. 原理讲解 这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibility: h ...
最新文章
- UML类图新手入门级介绍
- Oracle 11g 客户端使用
- Intellij IDEA社区版集成Maven插件
- photoshop CS6 注册码文件 amtlib.dll
- x7 z8750 linux,x7-z8750 vs m3-7y30
- 关于ATmega328P和ATmega328PB中16位定时器的使用
- SM2证书的鉴定方法——续上文国密算法
- matlab专区--------------matlab里面如何保留小数特定位数
- 第15课 模块与包
- 抓取全网财经新闻,计算新闻相关股票的多空舆情,量化买入
- 使用minikube快速部署k8s集群
- 【Kafka】测试集群中Broker故障对客户端的影响
- python机器学习之SVM分类预测电芯状态
- QT里的函数void Q_INIT_RESOURCE ( name )
- 淘宝天猫京东拼多多等平台关键词监控价格API接口(店铺商品价格监控API接口代码对接展示)
- 最全面免费下载的Altium designer 3D元件封装库模型效果图库,可以直接在工程中应用
- 面试题-ARP防御方法
- sudo pacman 安装mysql_Linux学习----manjaro
- js实现城市首字母导航
- 基于insightface实现的人脸识别和人脸注册