1.利用display:table-cell,具体代码如下:

html代码如下:

 <div class="img_wrap">
  <img src="wgs.jpg">
</div>

css代码如下:

 .img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}

效果如下:

2.采用背景法:

html代码如下:

 <div class="img_wrap"></div>

css代码如下:

.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
background: url(wgs.jpg) no-repeat center center;
}

效果如下图:

3.图片外面用个p标签,通过设置line-height使图片垂直居中:

html代码如下:

 <div class="img_wrap">
<p><img src="wgs.jpg"></p>
</div>

css代码如下:

 *{margin: 0px;padding: 0px}
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
text-align: center;}
.img_wrap p{
width:400px;
height:300px;
line-height:300px; /* 行高等于高度 */
}
.img_wrap p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}

效果图如下:

css 使图片水平垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  4. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  5. 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  9. Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半

    问题描述: 如何使按钮水平垂直居中且始终占据屏幕宽度一半 效果如下: 竖屏: 横屏: 解决方案: 使用线性布局,指定线性布局的总权重(weightSum)为1, 指定按钮的权重为其一半即0.5 布局代 ...

随机推荐

  1. ef

    现阶段使用回溯 entityframework作为.net平台自己的一个orm的框架,之前在项目中也有使用,主要采用了table和model first的方式,此两种感觉使用上也是大同小异.在项目中经 ...

  2. FunDA(0)- Functional Data Access accessible to all

    大数据.多核CPU驱动了函数式编程模式的兴起.因为函数式编程更适合多线程.复杂.安全的大型软件编程.但是,对许多有应用软件开发经验的编程者来说,函数式编程模式是一种全新的.甚至抽象的概念,可能需要很长 ...

  3. Linux文件管理命令笔记

    more\less:翻页命令 more:翻页的形式查看文件内容.该命令可作为管道命令. 翻页过程可使用的键: 空格(space):向下翻页: 回车(Enter):向下翻一行: b:往回翻,只限,但管道 ...

  4. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  5. ArcGIS Engine开发之地图文档保存

    在对地图文档进行修改后,经常需要对其进行保存.地图文档的保存有直接保存和另存为两种方式.这里的地图文档的修改指的是修改地图文档文件记录信息,不是对空间数据的编辑. 1.地图文档保存 具体实现的思路: ...

  6. Project Server 2016 部署

    问题: 手动创建网站集后,激活Project的功能时候报错 Only Administrator users can obtain the connection string for [Admin] ...

  7. 在View and Data API中更改指定元素的颜色

    大家在使用View and Data API开发过程中,经常会用到的就是改变某些元素的颜色已区别显示.比如根据某些属性做不同颜色的专题显示,或者用不同颜色表示施工进度,或者只是简单的以颜色变化来提醒用 ...

  8. UITabBarController 基本定制

    UITabBarController 定制 特点 用法 1.准备好你的tabBar图片及其他图片(哈哈哈!!!!),我的图片都放在了Assets.xcassets中. 2.导入本工程中的Categro ...

  9. iOS -- 轮播图

    UIScrollView + 多张 ImageView 实现轮播 实现原理: 将所有图片的名字储存在数组 imageAry 中,imageAry 的元素个数为 num,在 scrollView 上添加 ...

  10. WebViewJavascriptBridge源码探究--看OC和JS交互过程

    今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...