一直以来,前端开发过程中本人遇到最多,最烦的问题之一是元素如何垂直居中,发现开发过程中,元素的垂直居中一直是个很大的麻烦事,经常发现PC端和电脑模拟元素都垂直居中了,但是遇到移动端真机总是会出现层次不穷的问题,让人头大不已。因此我决定好好研究下究竟如何正确让元素垂直居中。

下面是我的研究过程:

      基础      

一、元素父级为"block",没有固定高度,靠padding等自动撑开高度

【小结:元素均会自动垂直居中】

二、元素父级为"block",有固定高度

【小结:需要给父级设置固定行高,如需相对父级垂直居中,行高应与父级高度一致】

三、元素父级为"inline-block",没有固定高度,靠padding等自动撑开高度

【小结:与父级为"block"时一样,元素均会自动垂直居中】

四、元素父级为"inline-block",有固定高度

【小结:与父级为"block"时一样,需要给父级设置固定行高,如需相对父级垂直居中,行高应与父级高度一致】

五、元素父级为"inline",没有固定高度,靠padding等自动撑开高度

【小结:与父级为"block"时一样,元素均会自动垂直居中】

总结:无论父级元素是块级、内联还是内联块级,在没有固定高度的情况下,其下面的子集(无论是内联或内联块级)均会自动垂直居中。在有固定高度的情况下,需要给父级添加行高"line-height"样式即可。

     多层嵌套     

(为了不废话,之后的不再做单独的固定高度影响的演示,只做文字说明)

一、元素父父级为"block",父级为"inline-block"
【小结:当父父级为"block"时,无论父级元素是块级、内联还是内联块级,在没有固定高度的情况下,其下面的子集(无论是内联或内联块级)均会自动垂直居中。在父父级和父级同时或单独添加高度,需要给有固定高度的父父级或父级添加行高"line-height",这一点与之前的总结基本是一致的。】

总结:之后我对元素父父级与父级均为"inline-block"和元素父父级为"inline",父级为"inline-block"等做了测试,结果发现,无论父父级元素为什么类型,均与之前的总结是一致的,只需要看元素的父级的模式即可。

     最后,错综复杂(重点)     


       综上所述:      

  • 父父级-父级-子集式 || 父级-子集式:管他父级还是父父级,无固高不用管,有固高加行高
  • 父父级-混合父级-混合子集式:什么都别管,先给所有内联块级父子集加{ vertical-align: middle; }样式,还有不对齐的往他前面塞个高度100%的内联块级元素,并添加{ vertical-align: middle; }样式,完美

  • PS:研究之余,发现一个兼容性问题,即当元素为inline时,IOS与除IE外的PC浏览器均显示正常,但是在安卓手机中如果你够仔细你会发现他有2px的padding-bottom,IE中有1px的padding-bottom。不信,你瞧瞧下面这个,坑了吧,当然了这个范围还是将就能够凑合吧,如果比较较真的呢,你就自己想想办法吧!
IOS和IE外的PC浏览器查看正常
安卓手机查看正常
IE查看正常

html原文在我的github中【LayoutSimple Demo】中,需要查看代码的可以移步这里查看

作者:leona

原文链接:https://www.cnblogs.com/leona-d/p/10455791.html

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

Css-浅谈如何将多个inline或inline-block元素垂直居中的更多相关文章

  1. css浅谈

    一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

  2. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  3. 浅谈对CSS的认识

    自从进公司也有2个多月了,相信和我一批进来的小伙伴们都收获了很多东西,这个是在学校所学不到的,也让成长了很多.作为新人的我,从认为CSS是个很简单的东西,到现在觉得CSS中水很深,感觉学了很多的CSS ...

  4. 浅谈Normalize.css

    浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...

  5. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  6. CSS属性中的display属性浅谈;

    首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...

  7. 浅谈block, inline和inline-block的区别

    block 块元素    inline 内联元素 常见的块元素有:div, p, h1~h6, table, form, ol, ul等 常见的内联元素有:span, a, strong, em, l ...

  8. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  9. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  10. 浅谈Hybrid技术的设计与实现第三弹——落地篇

    前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...

随机推荐

  1. php 删除指定文件 glob,unlink

    我用最简单的语句写了一个php删除指定文件 因为一直越级挑战thinkphp,所以突然面对php有点无所适从了... 首先,php的运行机制,是一个语法就搞定了,还是非要用数据库,还是post什么的. ...

  2. 时间操作(struct tm、time_t)求指定日期 前n天的日期

    1.在标准C/C++中,我们可通过tm结构来获得日期和时间,tm结构在time.h中的定义如下: #ifndef _TM_DEFINED struct tm { int tm_sec; /* 秒–取值 ...

  3. (转)如何根据RGB值来判断这是种什么颜色?

    如何根据RGB值来判断这是种什么颜色? 下面介绍几种典型颜色的RGB值,格式为:颜色(R,G,B). 想象一下有红.绿.蓝三盏射灯打出三束光. 这三束光叠加在一起时产生白色,如果三盏灯的亮度都减半就产 ...

  4. 解决ERROR_INVALID_USER_BUFFER

    我用CSocket编写了一个HTTP下载程序,接收数据大概如下: //...... //use CSocket class //send request... //...... ); ) { Zero ...

  5. Navicat for MySQL使用手记(上)--创建数据库和表

    在管理MySQL数据库的图形化工具中,最为熟知的就是phpMyAdmin和Mysql-Front了,今天跟大家分享另外一个管理mysql数据库的另外一个利器---Navicat MySQL. Navi ...

  6. Chrome各个版本小常识

    摘要: 近期在网上看到chrome有个金丝雀版,第一次看到这个版本,所以就将chrome的各个版本进行了了解,chrome是前端开发最好用的工具,不仅仅是它的调试工具,还有他对HTML5/CSS3的兼 ...

  7. ros-indigo-desktop-full安装到ubuntu14.04

    一.安装ros(原创博文,转载请标明出处-周学伟http://www.cnblogs.com/zxouxuewei/) 1.配置ubuntu的软件仓库.(可以不用进行配置). 配置你的 Ubuntu ...

  8. Java------遍历Map<k,v>的方法

    1. public class MapAction extends ActionSupport{ private Map<String, User> map = new HashMap&l ...

  9. mybatis由浅入深day02_9逆向工程

    9 逆向工程 9.1 什么是逆向工程 mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mappe ...

  10. Burp Suite使用教程

    http://www.nxadmin.com/tools/689.html http://tech.idv2.com/2006/08/31/burp-suite/ http://www.securit ...