说明:样式设置主要是针对图片的父级元素,并非图片元素本身。

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小技巧-图片垂直居中的更多相关文章

  1. CSS小技巧-图片自动缩放

    css的一个重要属性:max-width min-width 示例: <div width="500" height="259"><p> ...

  2. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  3. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  4. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  5. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  6. CSS 小技巧 | 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  7. CSS小技巧使用

    1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...

  8. 模仿也是提高,纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  9. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

随机推荐

  1. 替换bmp图片中的颜色 good

    工作中,经常需要将bmp图片中的某个颜色修改为另外一种颜色.比如:将图片中的所有白色均修改成灰色. 平时都是拿画图板中的油漆桶工具一点一点的刷,费时又费力.(这么干好几年了 :( ) 今天抽空编了一个 ...

  2. /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 ...

  3. Socket编程指南及示例程序

    例子代码就在我的博客中,包括六个UDP和TCP发送接受的cpp文件,一个基于MFC的局域网聊天小工具工程,和此小工具的所有运行时库.资源和执行程序.代码的压缩包位置是http://www.blogja ...

  4. SRM 585 DIV 1 总结

    题意:给你一棵高度为H的完全二叉树的路,问最少需要多少辆车把这路走完,车子不能返回. 那么最优的方案就是从小到上一层层的走完,就很容易地可以得到一种递推,需要注意的就是dp[0]  = 1 #incl ...

  5. C# 动态载入Dll

    1.新建測试dll及方法,用vs2010新建winform程序,详细代码例如以下: using System; using System.Collections.Generic; using Syst ...

  6. POJ训练计划1459_Power Network(网络流最大流/Dinic)

    解题报告 这题建模实在是好建.,,好贱.., 给前向星给跪了,纯dinic的前向星居然TLE,sad.,,回头看看优化,.. 矩阵跑过了.2A,sad,,, /******************** ...

  7. C++中++运算符的重载

    void showTime() const; Clock& operator ++(); Clock operator ++(int); private: int hour,minute,se ...

  8. SQL Server 判断表中是否存在某字段

    功能:判断表中是否存在某字段,若不存在,则新增该字段 语句: IF NOT EXIST (SELECT 1 FROM [DATABASE].[SCHEMA].SYSCOLUMNS WHERE ID=O ...

  9. JavaScript的深度克隆

    1.JavaScript的五种基本数据类型: Number.String.Boolean.null.undefined. 2.typeof返回的六种数据类型: Number.String.Boolea ...

  10. mac的svn之cornerstone简易教程

    链接地址:http://jingyan.baidu.com/article/9989c74612a55af648ecfef2.html 背景: 关于cornerstone的介绍很少: 这里介绍mac的 ...