当前位置:课得在线 > 精品课程 > WEB前端 > 纯CSS怎样实现未知尺寸图片的垂直居中

  1.淘宝的方法

  在曾经的"淘宝UED招聘"中有这样一道题目:

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

  当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

  题目的难点在于两点:

  垂直居中;

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

关于CSS的图片

  至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

  .box {

  display: table-cell;

  vertical-align:middle;

  text-align:center;

  *display: block;

  *font-size: 175px;

  *font-family:Arial;

  width:200px;

  height:200px;

  border: 1px solid #eee;

  }

  .box img {

  vertical-align:middle;

  }

  2.背景法

  背景法简单但不利于动态导入的图片

  3.背景法

  .qq {

  width:500px;

  display:table-cell;

  height:400px;

  text-align:center;

  vertical-align:middle;

  border: 1px solid #000

  }

  i {

  display:inline-block;

  height:100%;

  vertical-align:middle

  }

  .qq img {

  vertical-align:middle;

  }

HTML&CSS设计图

  这种方法也很简单,但需要加一个的额外标签

  如果页面需要一两个居中的图片,那此方法是可推荐,但如果很多个产品的图,那加的标签数量就比较多

  其他解决方法,有兴趣的朋友可以戳:

  p{

  height: 400px;

  line-height: 400px;

  overflow: hidden;

  }

  此方法也只适用于单行的文字或者图片+文字,通常用于前面带有小图标的链接或标题等。

纯CSS怎样实现未知尺寸图片的垂直居中

2018-12-29 14:53:51

1.淘宝的方法 在曾经的淘宝UED招聘中有这样一道题目: 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。


点击咨询

联系我们

扫码关注,获取更多

成都课得在线 | 天荣北软实训基地

地址:四川省 成都市 锦江区 东方广场C座13楼

Q Q:294112395

电话:17158221981

手机:+86 17158221981

备案号:蜀ICP备18034030号

报名咨询 0元入学 助学贷款 就业保障 视频下载 在线公开课 咨询热线13980937246