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"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- UEFI+GPT模式下的Windows系统中分区结构和默认分区大小及硬盘整数分区研究
内容摘要:本文主要讨论和分析在UEFI+GPT模式下的Windows系统(主要是最新的Win10X64)中默认的分区结构和默认的分区大小,硬盘整数分区.4K对齐.起始扇区.恢复分区.ESP分区.MSR ...
- C# 自定义文件图标 双击启动 （修改注册表）
程序生成的自定义文件,比如后缀是.test 这种文件怎么直接启动打开程序,并打开本文件呢 1.双击打开 2.自定义的文件,有图标显示 3.自定义的文件,点击右键有相应的属性 后台代码:(如何在注册表中 ...
- MultiThread
Stephen Toub From MicroSoft Crop. Stephen Cleary It's All About the SynchronizationContext How would ...
- JustWe-WebServer Android上的Http服务器
JustWe-WebServer Android手机上的Http服务器,可以用于内网/外网的数据交换. ps: 这个项目是JustWeEngine游戏框架中处理网络事件的一部分. 如何使用 设置as ...
- 谈谈Java中的ThreadLocal
什么是ThreadLocal ThreadLocal一般称为线程本地变量,它是一种特殊的线程绑定机制,将变量与线程绑定在一起,为每一个线程维护一个独立的变量副本.通过ThreadLocal可以将对象的 ...
- 【2016-10-31】【坚持学习】【Day16】【MongoDB】【入门 -概念】
MongoDB 概念解析 不管我们学习什么数据库都应该学习其中的基础概念,在mongodb中基本的概念是文档.集合.数据库,下面我们挨个介绍. 下表将帮助您更容易理解Mongo中的一些概念: SQL术 ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- Unity3D脚本行尾(Line Endings)
行尾不一致(inconsistent line endings ) 开发环境 有时候编辑Unity的脚本文件,代码diff之后,或者从svn更新文件之后,Unity中会出现行尾不一致的信息. 我的开发 ...
- Metasploit爆破tcpwrapped服务
转自:http://www.mamicode.com/info-detail-1653722.html 一.利用nmap工具扫描目标主机 1.1 使用nmap命令对目标主机进行扫描. 1.2 在终端中 ...
- Struts2 contentType属性列表
Struts2 contentType属性列表 博客分类: Struts 2 'ez' => 'application/andrew-inset', 'hqx' => 'applica ...