css 图片垂直居中总结
1.利用vertical-align:middle; 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block;图片样式设置vertical-align:middle;
添加的span标签要给高度100%; display:inline-block;
HTML
<div>
<span></span>
<img src="data:images/list3_1.jpg">
</div>
css
<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
} </style>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
} </style> <div>
<span></span>
<img src="data:images/list3_1.jpg">
</div> </body>
</html>
2.上面的结构 会多个多余的标签
HTML
<div>
<a href="">
<img src="">
</a>
</div>
CSS
div {
width:221px;
height:70px
}
div a{
display:inline-block;
width:221px;
height:70px;
line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/
text-align:center; /*水平居中*/ }
div a img{
vertical-align"middle;
}
兼容 IE7+以上可以
css 图片垂直居中总结的更多相关文章
- css图片垂直居中
css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- css垂直居中怎么设置?文字上下居中和图片垂直居中
css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS让图片垂直居中的几种技巧
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- CSS中如何实现未知尺寸图片垂直居中
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- js,jq新增元素 ,on绑定事件无效
在jquery1.7之后,建议使用on来绑定事件. $('.upload a').on('click',function(){ $(this).remove(); }) 在DOM渲染的时候,也就是ht ...
- JavaScript根据文件名后缀判断是否图片文件
//JavaScript根据文件名后缀判断是否图片文件 //图片文件的后缀名 var imgExt = new Array(".png",".jpg",&quo ...
- eclipse下maven项目保持原有目录结构配置resin运行环境
maven项目用起来很方便,但是它的目录结构和eclipse的目录结构是有区别的,故而在eclipse下的maven项目,直接运行调试是有一些问题的. 为了方便maven项目的运行调试,因而也就有了像 ...
- ASP.NET Core AD 域登录
在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...
- 关于linux中的时间 时区问题
本文部分来源于: http://hi.baidu.com/peruke/blog/item/b8de06ec6a04583b27979132.html 系统是fedora: glibc实现了从RTC ...
- openstack学习(三)创建虚拟机
1 , 用图形管理界面创建虚拟机 #virt-manager //打开图形管理界面 配置文件一般存放于/etc/libvirt/qemu 然后按照提示一步步安装即可,网络连接方式改为桥接 导出创 ...
- BZOJ 2330: [SCOI2011]糖果 [差分约束系统] 【学习笔记】
2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 5395 Solved: 1750[Submit][Status ...
- time.c 的Java实现(从timestamp计算年月日时分秒等数值)
time.c的Java实现 public class GMT { public static final int EPOCH_YEAR = 1970; public static final int[ ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...