首页
文章
留言
首页
文章
留言
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常用函数总结
JavaScript之window.location
HTML5常用特性总结
jquery.tmpl使用总结
全部分类
前端
后端
运维
架构
算法
数据库
移动应用
桌面应用
程序开发
热门标签
多线程
Python
JavaScript
Git
Shell
CSS
Composer
CentOS
iOS
macOS
NoSQL
Redis
Kubernetes
C++
Supervisor
Qt
MongoDB
Lua
OpenResty
爬虫
Elasticsearch
Kafka
HTML
MySQL
PHP
Linux
Docker
Android
GUI
Nginx
Objective-C
Sphinx
热门文章
iOS开发之面向对象
iOS开发之定时执行任务
macOS常用命令
Elasticsearch详解
Git使用总结
Redis缓存击穿、穿透、雪崩
iOS开发之WiFi传输文件
iOS开发之Touch ID指纹解锁实例
Kubernetes介绍
OpenResty+Lua+Kafka收集日志