设置图片元素上下垂直居中的7种css样式
阅读(9548) @2018-07-15 14:13:34
图片、文字左右居中很简单,只需要以下代码:
文字上下居中也很简单,假设外部div元素的高度是100px,那么:
line-height不适用于图片,想要设置图片上下居中对齐,代码如下:
方法一:diaplay:table-cell
HTML部分:
2
|
<img src="http://www.0351zhuangxiu.com/uploads/images/456.jpg" />
|
|
CSS部分:
6
|
/*以下两段css代码就是设置图片上下对齐*/
|
|
兼容性:由于display:table-cell的原因,IE6\7不兼容。
解释一下:
一、display:table-cell属性简述:
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。
我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。
一、大小不固定,多行文字的垂直居中:
1、单行文字
可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。
2、多行文字
如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。
外部div标签css样式设置如下:
05
|
border:4px solid #beceeb;
|
08
|
vertical-align:middle;
|
|
内部span标签css样式设置如下:
下面这张是实例演示页面的效果截图:
方法二:position加margin
03
|
<div class="center"></div>
|
|
兼容性:主流浏览器均支持,IE6不支持。
方法三:position加 transform
03
|
<div class="center"></div>
|
19
|
-webkit-transform:translate(-50%,-50%);
|
20
|
transform:translate(-50%,-50%);
|
|
兼容性:ie9以下不支持 transform,手机端表现的比较好。
方法四:flex;align-items: center;justify-content: center
03
|
<div class="center"></div>
|
13
|
justify-content: center;
|
|
兼容性:移动端首选。
方法五:display:flex;margin:auto
03
|
<div class="center"></div>
|
|
兼容性:移动端首选。
方法六:纯position
03
|
<div class="center"></div>
|
|
兼容性:适用于所有浏览器。
方法六中的方法一计算公式如下:
子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px。
方法二计算公式:
left值固定为50%;
子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
top值也一样,固定为50%,子元素的margin-top= -(子元素的高/2)=-100/2= -50px。
方法七:兼容低版本浏览器,不固定宽高
03
|
<div class="tableCell">
|
04
|
<div class="content">不固定宽高,自适应</div>
|
10
|
height: 200px;/*高度值不能少*/
|
11
|
width: 200px;/*宽度值不能少*/
|
20
|
vertical-align: middle;
|
|
暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。
总结:在PC端,我习惯用方法一:display:table-cell。在移动端,方法六用的比较多。
实现水平垂直居中的css方法有很多,只要习惯用其中的一两种即可。
设置图片元素上下垂直居中的7种css样式_赵一鸣博客相关推荐
- LESS vs SASS?选择哪种CSS样式编程语言?
你可能已经被关于应该用Sass还是用LESS的争论折磨死了.在这篇文章中,我会解释为什么你应该使用Sass.如果你感兴趣,我会介绍如何开始使用Sass以及在预处理时会遇到的一些问题. 在我的长篇大论之 ...
- epoll学习:思考一种高性能的服务器处理框架 - fanlb - 博客大巴
epoll学习:思考一种高性能的服务器处理框架 - fanlb - 博客大巴 epoll学习:思考一种高性能的服务器处理框架 - fanlb - 博客大巴 epoll学习:思考一种高性能的服务器处理框 ...
- CSS中让元素水平垂直居中的6种写法
水平垂直居中 水平居中 水平垂直居中--flex布局 margin + position:absolute布局 transform + absolute absolute + margin负值 abs ...
- 元素水平垂直居中的几种常用方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素水 ...
- ios wkweb设置图片_iOS WKWebView (NSURLProtocol)拦截js、css,图片资源
项目地址github:HybirdWKWebVIew HybridNSURLProtocol 一个基于WKWebView的hybirde的容器.能拦截所有WKWKWebView的的css,js,png ...
- javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式 渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
- 谷歌浏览器如何查css,谷歌浏览器查看编辑元素CSS样式_谷歌工具
通过谷歌浏览器可以查看当前页面应用的具体CSS代码. 并且还可以在线编辑(仅对客户端有效)对应的CSS代码以便查看页面渲染效果. 一.查看指定元素CSS样式: 通过谷歌浏览器我们可以查看应用于指定元素 ...
- 分布式锁简单入门以及三种实现方式介绍_徐刘根的博客-CSDN博客
原文地址 rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmled ...
- 三种CSS样式的引用方式
CSS样式 3种引用样式的好处及区别: 外部引入样式 优点:代码易于管理和维护,一个CSS能控制多个页面.提高加载速度. 缺点:当外部CSS过多时会造成服务器的请求压力. 头部引入样式: . 优点: ...
最新文章
- 咖啡html代码,HTML5咖啡生成代码动画
- think.class.php下载,PHP_ThinkPHP实现将本地文件打包成zip下载,首先,将FileToZip.class文件放到T - phpStudy...
- 关于SIM800C MINI V4.0 V4版本 5v供电模块重启问题
- 版本分支管理标准 - Trunk Based Development 主干开发模型
- 表格在首行,添加空行
- layui导航栏页面滚动固定_帮你搞定长滚动网页的设计!这5种设计策略需谨记!...
- 使用 LaTeX 绘制 PGM(Probabilistic Graphical Models)中的贝叶斯网络(bayesian networks)
- 豆瓣评分9.2,GitHub 3.3k的学霸笔记终于出书了!获得李宏毅等大佬好评 -- 文末送书...
- 两小时学会ajax,全程无废话,直接上代码,追求速度的来
- 三十二个vbs整蛊代码,好玩到没朋友
- ext2文件系统源代码之inode.c
- python远程监控服务器多个日志_flume远程监控一个文件
- 多功能的small_vmt_hook
- Facebook sdk嵌入,登陆与注销
- python彩虹蛇_一亿年前巨蟒沃那比蛇一口能吞噬恐龙,沃那比蛇灭绝原因
- 用python的turtle模块给女票画个小心心
- antd vue 多个下拉 联动_antd中select下拉框值为对象选中的问题
- 基于RT-Thread的两轮平衡小车设计
- UnicodeEncodeError: ‘latin-1‘ codec can‘t encode characters
- bzoj3083 遥远的国度 bzoj3626 LCA (树链剖分)
热门文章
- 根据状态转移写状态机-三段式
- CETK测试原理/测试方法/测试结果分析以及常见WinCE Test Kit运行问题的排查
- navicat premium 链接postgresql 无法加载表_PostgreSQL 每周新闻 2020311
- etl数据抽取工具_数据同步工具ETL、ELT傻傻分不清楚?3分钟看懂两者区别
- hbase 查询固定条数_HBase原理深入
- 文件 云存储服务器配置,文件和存储服务器配置
- 如何开发出优秀的APICloud应用
- 16.unix网络编程一卷 unp.h
- AngularJS:表达式
- .Net Discovery系列之四 深入理解.Net垃圾收集机制(下)