文档章节

CSS中实现图片垂直居中

前端老手
 前端老手
发布于 09/20 18:56
字数 337
阅读 7
收藏 0

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

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

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

题目的难点在于两点:

1.垂直居中;


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


至于如何解决,下面是一个权衡的相对结构干净,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;


}


 " />

 

本文转载自:https://www.mk2048.com/blog/blog.php?id=j2icc0jaa

前端老手
粉丝 10
博文 571
码字总数 0
作品 0
卢湾
技术主管
私信 提问
html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

在日常开发中,经常会使用到图片与文字或图片与按钮对齐。 1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下: <div> <img src="" style="vertical-align:middle"/> <button type="bu......

突然很想飞
2015/12/08
5.5K
0
前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜
2017/11/28
0
0
前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/Thefront-endtechnologypureCSStoachieveimagevertically 来自 : LM......

hosser
2015/05/15
294
0
vertical-align属性与垂直居中

让元素居中对齐是非常常见的需求,首先是水平居中,要实现水平居中行内元素只需要在其父元素上设置即可,对于块级元素来说让它的和即可(width不可为auto),那么垂直居中呢?找下css属性发现...

leozdgao
2015/05/21
0
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
700
0

没有更多内容

加载失败,请刷新页面

加载更多

可能是国内第一篇全面解读 Java 现状及趋势的文章

作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布《2019 中国 Java 发展趋势报告》,反映 Java 在中国发展的独特性,同时也希望大家对 Java 有...

阿里云官方博客
6分钟前
1
0
Spring Boot 2.x基础教程:Swagger静态文档的生成

前言 通过之前的两篇关于Swagger入门以及具体使用细节的介绍之后,我们已经能够轻松地为Spring MVC的Web项目自动构建出API文档了。如果您还不熟悉这块,可以先阅读: Spring Boot 2.x基础教程...

程序猿DD
10分钟前
1
0
《毅力》读书笔记

1.确信你全身心地投入 2.准备好为目标进行艰难的跋涉 3.通过减少需要使用毅力的情形,为将来的挑战做好准备 4.尽可能具体细致地确定你的目标和实现目标的过程 5.把挑战分解为小而易于管理的小...

lingch
11分钟前
2
0
zk中快速选举FastLeaderElection实现

选举涉及概念 服务器状态 投票 如何选择投票? 协议 选举 如何进行选举? epoch 发送者 接收者 发送队列 接收队列 服务器状态 public enum ServerState { LOOKING,寻找Leader状态,当服务处于...

writeademo
14分钟前
1
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

Linux就该这么学
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部