CSS实现图片垂直居中

原创 2015年11月19日 11:48:19
难点在于两点:
  1.垂直居中;

  2.图片是个置换元素,有些特殊的特性。


CSS简单的解决方法:


.box {
  width:200px;
  height:200px;
  border: 1px solid #eee;
  
 /*非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编码*/
}

.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

【CSS】单行图片与文字垂直居中

单行图片与文字垂直居中核心关键,是在img标签中的style属性加入vertical-align:middle;样式 如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的。 注意如下的代码的...
  • yongh701
  • yongh701
  • 2015年09月16日 10:41
  • 12192

实现div里的img图片水平垂直居中

body结构 方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align...
  • DreamFJ
  • DreamFJ
  • 2017年03月31日 09:53
  • 31905

用CSS/CSS3 实现 水平居中和垂直居中的完整攻略

水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:cente...
  • Summer_lover_
  • Summer_lover_
  • 2017年03月26日 21:05
  • 1897

css实现图片垂直居中(兼容IE6/IE7)

图片垂直居中兼容ie系列 优劣对比: 1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome 优点:不添加任何多余标签,兼容主流浏览器 缺点:需要...
  • boyit0
  • boyit0
  • 2016年07月06日 17:56
  • 270

css如何实现图片垂直水平居中

图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性text-align:centre水平居中,但这个方法经常无效,很多前端攻程师都有研究过或者说是搜索...
  • m0_37290635
  • m0_37290635
  • 2017年03月12日 21:51
  • 298

纯css实现div中未知尺寸图片的垂直居中

1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有...
  • sinat_39080392
  • sinat_39080392
  • 2017年06月08日 10:31
  • 154

使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?

解决这个问题有多种方法 1.使用css hack 处理ie6下的问题。 2.嵌入其它标签使其垂直居中。 方法一:  .box {             /*非IE的主流浏览器识别的...
  • chitingtingstar
  • chitingtingstar
  • 2012年05月03日 14:41
  • 652

摘抄:CSS如何实现单行图片与文字垂直居中

以下选自(CSS权威指南) Example Source Code [www.mb5u.com] vertical-align 初始值: baseline(缺省值) 可否继续:否 ...
  • younger_z
  • younger_z
  • 2012年08月19日 19:54
  • 340

纯CSS实现未知高宽的图片在容器中水平和垂直居中

方法一: 简单的XHTML页面 .box { display: table-cell; vertical-align:middle; width:200px; height:200px...
  • oXiaoHe12345
  • oXiaoHe12345
  • 2015年07月27日 09:45
  • 387

html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

实现图片在容器累垂直居中有多种方法,例如使用计算高度使用margin,透明gif图片+背景定位等等,其中很多方法比较繁琐兼容性也不好,例如用position方法。下面为大家介绍两种比较简洁的方法,一种...
  • chen_gong1992
  • chen_gong1992
  • 2016年11月24日 19:15
  • 433
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS实现图片垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)