Css-浅谈如何将多个inline或inline-block元素垂直居中
下面是我的研究过程:
基础
一、元素父级为"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。不信,你瞧瞧下面这个,坑了吧,当然了这个范围还是将就能够凑合吧,如果比较较真的呢,你就自己想想办法吧!
html原文在我的github中【LayoutSimple Demo】中,需要查看代码的可以移步这里查看
作者:leona
Css-浅谈如何将多个inline或inline-block元素垂直居中的更多相关文章
- css浅谈
一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈对CSS的认识
自从进公司也有2个多月了,相信和我一批进来的小伙伴们都收获了很多东西,这个是在学校所学不到的,也让成长了很多.作为新人的我,从认为CSS是个很简单的东西,到现在觉得CSS中水很深,感觉学了很多的CSS ...
- 浅谈Normalize.css
浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- CSS属性中的display属性浅谈;
首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...
- 浅谈block, inline和inline-block的区别
block 块元素 inline 内联元素 常见的块元素有:div, p, h1~h6, table, form, ol, ul等 常见的内联元素有:span, a, strong, em, l ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- 浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
- 浅谈Hybrid技术的设计与实现第三弹——落地篇
前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...
随机推荐
- tensorflow函数学习笔记
https://www.w3cschool.cn/tensorflow_python/tensorflow_python-4isv2ez3.html tf.trainable_variables返回的 ...
- CommonJS初识
CommonJS是什么 CommonJS是一个标准库,或者说是一组规范.因为官方并没有给出真正的代码实现,而是给出一些代码组织规范.常用模块的api.包(Package)的命名规范和具体格式. Com ...
- linux -- Apache执行权限
最近在用php调用exec方法去执行一个linux终端下的命令,结果每次都不能执行成功,网上多番搜寻,最终找到一篇有用的文章,主要原因是因为Apache的执行权限的问题.以下是原文(稍加修改): 利用 ...
- Oracle-05-SQL语句概述、分类&SQL*PLUS概述(初识insert,desc,list,r,del,a,c,n等命令)
一.SQL语句概述 (1)SQL全程是"结构化查询语言(Structured Query Language)". SQL是大多数主流数据库系统採用的标准查询语言. (2)SQL语句 ...
- 经常使用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSS Ha ...
- 监听程序未启动或数据库服务未注册到该监听程序。启动该监听程序并注册数据库服务 然后重新运行 em configuration assistant。
在WIN 7/64Bit上安装ORACLE 11gR2后,管理网页Database Control(如:https://localhost:1158/em)始终登录不进去,总是说密码错误,使用配置工具 ...
- 【Python】动态获取python类名、函数名&多线程
import time import random import threading import inspect def get_current_function_name(): return in ...
- mongodb php auto increment 自增
mongodb的自增实现根oracle,postgresql是差不多,都是通过计数器来实现的. oracle自增实现: 实例说明oracle序列用法 postgresql自增实现: postgresq ...
- Ubuntu 10.04 安装 Oracle11gR2
注意点: 在 ubuntu的 /bin 下建立以下几个基本命令的链接: /bin/basename->/usr/bin/basename /bin/awk->/usr/bin/gawk / ...
- VC++ :实现简单的文件拖放(Drag and Drop)功能
1) VC++ 6.0 新建一个基于对话框的MFC的工程,取名MfcDropFiles: 2) 去除默认的控件,包括确定/取消按钮,以及一个静态文本: 3) 在对话框空白区域拖放一个ListBox控件 ...