大数跨境
0
0

元素水平、垂直居中方法汇总

元素水平、垂直居中方法汇总 网信科技
2019-03-07
0
导读:作者:网信科技智慧旅游产品部——邓子豪一行内元素1、行内元素的特点:①总是和相邻的行内元素在同一行上②设置宽

作者:网信科技智慧旅游产品部——邓子豪


行内元素


1、行内元素的特点:

①总是和相邻的行内元素在同一行上

②设置宽高无效,水平的padding和margin有效,垂直方向无效

③默认宽度是它内容的宽度

④行内元素只能容纳其他行内元素和文本内容

 

2、行内元素的水平、垂直居中

①通过vertical-align


<--vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的,而我们只需要建立一个新元素,给他加上inline-block属性 再把他高度设置为100%就行了,在下面的设置vertical-align就生效了-->

 

②flex布局


③position:absolute;绝对定位方式


④使用display:table-cell配合vertical-align:center


块级元素


1、块级元素的特点:

①独占一行

②可设置宽高和padding、margin

③不设置宽度默认100%

④可容纳其他块元素和行内元素

 

2、块级元素水平垂直居中方法:

①已知宽高

 

②宽高未知

方法一:绝对定位配合margin:auto


方法二:绝对定位配合css3属性transform


方法三:flex布局


IT综合服务

智慧旅游解决方案专家




【声明】内容源于网络
0
0
网信科技
苏州网信信息科技股份有限公司成立于2007年,公司总部设立在江苏省苏州市,目前拥有近百名员工。公司主要从事智慧城市规划设计与实施,包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。
内容 403
粉丝 0
网信科技 苏州网信信息科技股份有限公司成立于2007年,公司总部设立在江苏省苏州市,目前拥有近百名员工。公司主要从事智慧城市规划设计与实施,包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。
总阅读61
粉丝0
内容403