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

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. 终于懂了:两个UI组件同时在操作是不可能实现的

    // 目的:从某个对话框里,选择一些路径,然后用Tree自动展开这些路径,但至少需要几秒钟时间 // 问题:在这几秒钟期间,显示一个等待对话框,只能开多线程,因为后台继续要处理tree的一些事情.等待 ...

  2. ilmerge合并多个组件

    原文 http://www.cnblogs.com/margiex/archive/2008/06/24/302329.html 年初的一篇文章中提到过一下: http://margiex.cnblo ...

  3. Struts 和Spring的核心控制器

    Struts 核心控制器是FilterDispatch Spring核心控制器是DispatchServlet

  4. Oracle fga审计有这几个特性

    fga审计有这几个特性: 本文为原创文章,转载请注明出处: http://blog.csdn.net/msdnchina/article/details/38409057 1.select * fro ...

  5. WCF 双工通信

    注释:本学习是参考Artech大神的资料: 在WCF 实现双工通信 在这里我就不介绍双工通信的概念了,我写博客的目的是检测自己掌握情况,看我wcf通信后,觉得纸上得来终觉浅,绝知此事要躬行. 我使用的 ...

  6. Javascript初级学习总结

    首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...

  7. hdu 2519 新生晚会 排列组合

    通过阶段性计算减少一次性的大值计算 #include <stdio.h> int main() { int t, a, b, i; __int64 c; scanf("%d&qu ...

  8. [Jobdu] 题目1517:链表中倒数第k个结点

    给出一个链表的头指针,要求找到倒数第k个节点,并输出这个节点的值 例子: 先看一个例子,链表为:1 2 3 4 5 6,倒数第2个节点就是5,倒数第一个节点就是6,以此类推.这里的链表有头节点,就是说 ...

  9. Problem B The Blocks Problem(vector的使用)

    题目链接:Problem B 题意:有n块木块,编号为0~n-1,要求模拟以下4种操作(下面的a和b都是木块编号) 1. move a onto b: 把a和b上方的木块全部归位,然后把a摞在b上面. ...

  10. android手机关于google play商店闪退的解决办法

    部分android手机没有安装google play商店,这个可以通过类似“机锋”.“360手机助手”等应用市场下载. 安装google play商店后,点击打开却一闪而过:这个问题是因为手机没有安装 ...