首页
文章
留言
首页
文章
留言
CSS设置图片水平及垂直居中
2016 年 11 月 12 日
前端
CSS
在前端开发中，经常会遇到图片居中的情形：要么水平居中、要么垂直居中，其实方法有很多，下面就总结两种实现 CSS 设置图片水平及垂直居中的方法。 #### 方法一： ```css .box { /* 非IE的主流浏览器识别的垂直居中的方法 */ display: table-cell; vertical-align: middle; /* 设置水平居中 */ text-align: center; /* 针对IE的Hack */ *display: block; /* 约为高度的0.873，200*0.873 约为175 */ *font-size: 175px; /* 防止非utf-8引起的hack失效问题，如gbk编码 */ *font-family: Arial; width: 200px; height: 200px; border: 1px solid #eee; } .box img { /* 设置图片垂直居中 */ vertical-align: middle; } ``` #### 方法二： ```css div { width: 600px; height: 600px; border: 1px solid red; text-align: center; } span { height: 100%; display: inline-block; vertical-align: middle; } img { width: 300px; height: 300px; vertical-align: middle; } ``` ##### HTML 源码： ```html <div> <span></span> <img src="1.jpg" alt=""> </div> ```
0
相关文章
CSS让元素水平垂直居中
JavaScript之window.location
JavaScript常用函数总结
jquery.tmpl使用总结
HTML5常用特性总结
全部分类
前端
后端
运维
架构
算法
数据库
移动应用
桌面应用
程序开发
热门标签
MySQL
PHP
Redis
Qt
Composer
GUI
Docker
NoSQL
Kafka
Kubernetes
Nginx
JavaScript
Shell
Git
iOS
爬虫
多线程
Elasticsearch
macOS
Linux
Sphinx
CSS
MongoDB
CentOS
Android
Python
Objective-C
Lua
C++
HTML
OpenResty
Supervisor
热门文章
PHP使用Kafka
iOS开发之收集崩溃信息
Nginx常用配置说明
PHP开发之PDO使用总结
iOS开发之类与类扩展
Composer使用总结
Qt实现TCP通讯
10种常见的软件架构模式
iOS开发之Touch ID指纹解锁实例
OpenResty+Lua+Kafka收集日志