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 ...
随机推荐
- 替换bmp图片中的颜色 good
工作中,经常需要将bmp图片中的某个颜色修改为另外一种颜色.比如:将图片中的所有白色均修改成灰色. 平时都是拿画图板中的油漆桶工具一点一点的刷,费时又费力.(这么干好几年了 :( ) 今天抽空编了一个 ...
- /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found,解压rpm包
如果是64位系统报错信息如下: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by 原因是没有GLIB ...
- Socket编程指南及示例程序
例子代码就在我的博客中,包括六个UDP和TCP发送接受的cpp文件,一个基于MFC的局域网聊天小工具工程,和此小工具的所有运行时库.资源和执行程序.代码的压缩包位置是http://www.blogja ...
- SRM 585 DIV 1 总结
题意:给你一棵高度为H的完全二叉树的路,问最少需要多少辆车把这路走完,车子不能返回. 那么最优的方案就是从小到上一层层的走完,就很容易地可以得到一种递推,需要注意的就是dp[0] = 1 #incl ...
- C# 动态载入Dll
1.新建測试dll及方法,用vs2010新建winform程序,详细代码例如以下: using System; using System.Collections.Generic; using Syst ...
- POJ训练计划1459_Power Network(网络流最大流/Dinic)
解题报告 这题建模实在是好建.,,好贱.., 给前向星给跪了,纯dinic的前向星居然TLE,sad.,,回头看看优化,.. 矩阵跑过了.2A,sad,,, /******************** ...
- C++中++运算符的重载
void showTime() const; Clock& operator ++(); Clock operator ++(int); private: int hour,minute,se ...
- SQL Server 判断表中是否存在某字段
功能:判断表中是否存在某字段,若不存在,则新增该字段 语句: IF NOT EXIST (SELECT 1 FROM [DATABASE].[SCHEMA].SYSCOLUMNS WHERE ID=O ...
- JavaScript的深度克隆
1.JavaScript的五种基本数据类型: Number.String.Boolean.null.undefined. 2.typeof返回的六种数据类型: Number.String.Boolea ...
- mac的svn之cornerstone简易教程
链接地址:http://jingyan.baidu.com/article/9989c74612a55af648ecfef2.html 背景: 关于cornerstone的介绍很少: 这里介绍mac的 ...