图片垂直居中的使用技巧
作者：blank 来源：蓝色理想 发布时间：2008-05-28 12:45:00
在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
垂直居中；
图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，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;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
</div>
当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：
《Vertical centering using CSS》
《Vertical centering using CSS》（标题和上同，内容不同）
0
投稿猜你喜欢
前言在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题.使用 v-bind 绑定数据- 首先是下载图解1、首先卸载centos7中自带的mariadbrpm -qa|grep mariadb //查询出来已安装的mariadbr
- 本文实例讲述了python采集百度百科的方法。分享给大家供大家参考。具体如下：#!/usr/bin/python# -*- coding:
- 引言图片减去均值后，再进行训练和测试，会提高速度和精度。因此，一般在各种模型中都会有这个操作。那么这个均值怎么来的呢，实际上就是计算所有训练
- 学习https://matplotlib.org/gallery/index.html 记录，描述不一定准确，具体请参考官网Matplotl
- 运行结果（2020-2-4日数据）数据来源news.qq.com/zt2020/page/feiyan.htm抓包分析日报数据格式"
- #!/bin/sh#code by scpman#功能:检查并修复mysql数据库表#将此脚本加到定时中，脚本执行时，等会读库,列出要修复的
- 在 PHP 中实现异步定时多任务消息推送的方式有多种，其中一种常用的方式是使用异步任务队列。以下是一个简单的步骤：安装和配置消息队列服务（如
- 先准备好软件：一、安装Apache，配置成功一个普通网站服务器 运行下载好的“apache_2.0.55-win32-x86-no_ssl.
- Django配置文件settings简单说明，包含时区语言等打开创建好的django工程，查看settings.py文件BASE_DIR =
- 在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展
- Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递但是如果是大中型项目中，很多时
- 前言“幸运牛牛套圈圈”套住欢乐，圈住幸福，等你来挑战！哈喽，大家上午好，我是你们的栗子同学，今天来给
- 简介一款跨平台/无依赖的自动化测试工具，目测只能控制鼠标/键盘/获取屏幕尺寸/弹出消息框/截屏。安装pip install pyautogu
- 本文实例为大家分享了python统计序列中元素的具体代码，供大家参考，具体内容如下问题1： &
- 在面向对象的理论中，有两个核心的概念：类和实例。类可以看成是一个模板，实例就是根据这个模板创建出来的对象。但在 Python 里面，类和实例
- 重装系统永远是个好办法，但有谁喜欢这么做呀:( 后来无意发现是卸载的时候没有卸载完全导致，下面给出完整的卸载MySQL 5.1的卸载方法：
- 本文默认你的开发环境.数据库已经安装好想用使用数据库.我们需要现在pom文件中添加相应的依赖pom.xml<?xml version=
- # -*- coding: utf-8 -*-import pymysqlimport xlrd# import codecs#连接数据库c
