`
omygege
  • 浏览: 1354442 次
文章分类
社区版块
存档分类
最新评论

图片垂直居中的使用技巧

 
阅读更多
.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:200px;
 height:200px;
 border: 1px solid #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

<div class="box">
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />
</div>



http://www.cnblogs.com/sanic/archive/2011/11/02/2233679.html
分享到:
评论

相关推荐

    CSS让高度不确定图片垂直居中的几种技巧

    下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img...

    CSS教程:网页图片垂直居中的使用技巧

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两...

    用css实现图片垂直居中的使用技巧

    使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中

    div+css有实例,易学易懂

    6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 ...

    CSS实现同一行的图片和文字垂直居中对齐的方法

    主要为大家介绍了CSS实现同一行的图片和文字垂直居中对齐的方法,涉及css中vertical-align:middle属性的使用技巧,需要的朋友可以参考下

    word使用技巧大全

    word使用技巧;公式编辑技巧;页眉页脚技巧;目录处理技巧;参考文献格式排版技巧,word画图技巧,word转PDF等等。 下面是本资源的详细目录! ============================================= 目录 I 一、利用大纲...

    VBA编程技巧大全

    技巧124 标签文字垂直居中对齐 293 技巧125 使用TabStrip控件 295 技巧126 显示GIF动画图片 297 技巧127 播放Flash文件 300 技巧128 在工作表中添加窗体控件 302 128-1 使用AddFormControl方法 303 128-2 使用Add...

    css技巧:经典CSS使用技巧几则

    MacJi “偷懒”翻译了部分,下午冒着被 BOSS 开除的危险将其补完(原文链接)。...使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里

    VBA常用技巧

    技巧124 标签文字垂直居中对齐 12 技巧125 使用TabStrip控件 12 技巧126 显示GIF动画图片 12 技巧127 播放Flash文件 12 技巧128 在工作表中添加窗体控件 12 128-1 使用AddFormControl方法 12 128-2 使用Add方法 12 ...

    CSS布局奇淫技巧之–各种居中总结

    使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。 ...

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...

    delphi 开发经验技巧宝典源码

    0016 使用快捷键打开对象观察器中的“...”按钮 11 1.5 其他相关应用技巧 11 0017 安装合适的Delphi版本 11 0018 熟练掌握Delphi中的菜单项 12 0019 构成Delphi项目的主要文件 12 0020 如何在程序中调用...

    delphi 开发经验技巧宝典源码06

    0016 使用快捷键打开对象观察器中的“...”按钮 11 1.5 其他相关应用技巧 11 0017 安装合适的Delphi版本 11 0018 熟练掌握Delphi中的菜单项 12 0019 构成Delphi项目的主要文件 12 0020 如何在程序中调用...

    css-adv:htmlcss 布局实现技巧练习

    )简单的tab切换,要压住下边线哦左小图,右自适应宽度的布局,小三角箭头的应用箭头以及垂直排列tag标签,注意文字垂直居中,标签要水平对齐表格布局小应用,如何变得更精美复杂的下单列表筛选排序功能筛选价格功能...

    Excel VBA实用技巧大全 附书源码

    01037设置最近使用的文件清单中的最多文件数 01038设置新工作簿中的工作表个数 01039设置文件的默认位置 01040设置保存自动恢复文件的时间间隔和保存位置 01041停止屏幕刷新 01042使事件无效 01043使取消键无效 ...

Global site tag (gtag.js) - Google Analytics