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

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. PCB流程-外型加工

  2. ceph基本操作整理

    一.ceph基本操作: 启动osd.mon进程: start ceph-osd id=X start ceph-mon id=YYY 关闭osd.mon进程: stop  ceph-osd id=X ...

  3. border-radius 知识点

    border-radius:50px; 边框半径 CSS度量值都:em.px.百分比如果设置1个值,表示4个圆角都使用这个值.如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值 ...

  4. [NOIP2001提高组]CODEVS1014 Car的旅行路线(最短路)

    最短路,这个不难想,但是要为它加边就有点麻烦..还好写完就过了(虽然WA了一次,因为我调试用的输出没删了..),不然实在是觉得挺难调的.. ------------------------------ ...

  5. [NewCoder]复杂链表的复制

    看下面一个链表结点的定义: struct ComplexListNode { int val; struct ComplexListNode *next; struct ComplexListNode ...

  6. 5.5 Function类型

    说起来ECMAScript中上面最有意思,我想那莫过于函数了,有意思的根源,则在于函数实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此 ...

  7. ThinkPHP常量参考

    常用常量 APP_NAME 当前项目名称 APP_PATH 当前项目路径 GROUP_NAME 当前分组名称 MODULE_NAME 当前Action模块名称 ACTION_NAME 当前操作的名称 ...

  8. Oracle "Job定时"

    今天需要做个定时器,定时到别的库导入数据用到了Job,第一次使用记录下来,如果有第一次操作的可以借鉴一下 1.首先,使用Toad新建job,进入配置页面

  9. 整理网站优化(SEO)的方案

    首先,我们来确定一下seo方案的定义是什么,所谓seo方案是指针对于某个网站,在完成了解熟悉的情况下,结合自身的一套seo优化方法来制定完成符合这个网站seo推广思路和策略.接下来就了解一下新手seo ...

  10. IM与工作信息流整合

    IM与工作信息流整合,希望减轻用户“信息”负担   从36氪此前的<“明道”现在推出个人免费版本,是怎样的逻辑?>一 文中,我们可以了解到,国内现在的协作产品设计思路主要有两种:一种是像t ...