当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-04

    本文导语:  题目的难点在于两点:  垂直居中;   图片是个置换元素,有些特殊的特性。   至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:  .box {    /*非IE的主流浏览器识别的垂直居中的方法*/    display:...

题目的难点在于两点: 

垂直居中;  
图片是个置换元素,有些特殊的特性。  
至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: 

.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;  
}  

  
   
 

当然还有其他的解决方法,在此不深究, 

    
 
 

您可能感兴趣的文章:

  • 在IE与FF中如何居中的css写法
  • css布局网页水平居中常用方法
  • css支持标准的图片垂直居中
  • 纯CSS实现上下左右都居中的代码
  • CSS网页布局入门教程3:一列固定宽度居中
  • CSS解决未知高度垂直居中的问题
  • CSS如何使DIV层居中
  • CSS网页布局入门教程7:二列固定宽度居中
  • css实现文字垂直居中的代码第1/2页
  • CSS解决未知高度垂直居中
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • CSS List Grid Layout 图片垂直居中
  • css ie6 ie7 ff的CSS hack使用技巧
  • CSS整体布局声明的一些使用技巧
  • PHP小技巧之JS和CSS优化工具Minify的使用方法
  • CSS使用技巧20则
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • CSS3实现文字动画 Textillate.js
  • php 压缩多个CSS文件的实现代码
  • 基于HTML5&CSS3实现的Slideshow Slider.js
  • CSS实现简单的图片防盗链代码
  • 用css来控制图片大小显示的实现方法与代码
  • css实现行间距效果
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • NOSQL iis7站长之家
  • 用css实现隐藏文本框
  • div+css如何实现页脚的置底
  • 用css实现的灰度/原色连接效果
  • css创意ul+li实现的细线表格实现代码
  • 用css滤镜实现的文字描边效果的代码
  • CSS opacity - 实现图片半透明效果的代码
  • jquery与css实现返回顶部的效果代码
  • 使用CSS不用程序实现文字自动截断 用省略号代替
  • 用css实现的带阴影的表格效果的代码
  • css滤镜实现页面灰色黑白色效果代码
  • CSS实现每行新闻数量不等效果代码
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3