Css小技巧-图片垂直居中
说明:样式设置主要是针对图片的父级元素,并非图片元素本身。
Css代码[图片父级点的样式]:
<style>
.box {
/*非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编码*/ /* 实验数据
width:400px;
height:500px;
border: 1px solid black;
*/
}
</style>
Html代码:
<div class="box">
<img src="图片路径" />
</div>
Css小技巧-图片垂直居中的更多相关文章
- CSS小技巧-图片自动缩放
css的一个重要属性:max-width min-width 示例: <div width="500" height="259"><p> ...
- 常用的CSS小技巧
实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- CSS 小技巧 | 一行代码实现头像与国旗的融合
到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...
- CSS小技巧使用
1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...
- 模仿也是提高,纯css小技巧实现头部进度条
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
随机推荐
- pyqt中使用matplotlib绘制动态曲线 – pythonic
一.项目背景: 看了matplotlib for python developers这本书,基本掌握了在pyqt中显示曲线的做法,于是自己写一个. 二.需求描述: 1)X轴显示时间点,显示长度为1分钟 ...
- VC实现卡拉OK字幕叠加
一. GDI编程基础 字幕叠加,应当是属于图形.图像处理的范畴.在Windows平台上,图形.图像处理的方法当然首选GDI(Graphics Device Interface,图形设备接口).GDI是 ...
- tarjan算法大意
Tarjan算法 (以发现者Robert Tarjan命名)是一个在图中寻找强连通分量的算法.算法的基本思想为:任选一结点开始进行深度优先搜索dfs(若深度优先搜索结束后仍有未访问的结点,则再从中任选 ...
- ios中的银联支付
场景 随着移动互联网的迅猛发展,移动互联已经深深地融入我们的生活.其中,支付方式也是我们生活中经常遇到的情况.所以,在我们的应用中加入支付功能是多么的重要.现在主流的支付接口,一是支付宝类的,一是银联 ...
- VC++深入详解-第五章学习心得
这一章节主要讲解了文本相关的一些编程 插入符的使用 CreateSolidCaret(100,200);//插入符的宽度和高度 ShowCaret(); 插入符的一般使用方法 int CTestVie ...
- IOS obj-c、c、c++混编
今天发现这个问题,上网找了一下资料,发现原来如下: .m 文件可以混合c 和 objective-c 代码 .mm 文件可以混合 c c++ objective-c 代码 .c .cpp 不能混 ...
- Amazon S3 API
一.概述 Amazon s3,全称为Amazon Simple Storage Service.EC2和S3是Amazon最早推出的两项云服务. REST,这也是比较火的一种Web服务架构.简单来说 ...
- python 使用xrld
下载xrld.要对应合适的python版本: 下载tar.gz包.解压 通过cmd进入该目录. setup.py build setup.py install 安装成功: 添加路径: from sys ...
- Unity UGUI在鼠标位置不同时 图片浮动效果
/// <summary> /// 在鼠标位置不同时 图片浮动效果 /// </summary> public class TiltWindow : MonoBehaviour ...
- IOS使用pch预编译文件
首先新建一个pch文件,然后要修改这个项目的Build Setting中的Prefix Header 修改为 $(SRCROOT)/项目名称/预编译文件名: 一般pch文件的用处: 1.导入框架,如: ...