mcq
居中方案
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
mcq
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
居中方案
居中方案
mcq
关注
发布于 2018-06-20 15:15:24
818
0
发布于 2018-06-20 15:15:24
举报
文章被收录于专栏:
无所事事者爱嘲笑
无所事事者爱嘲笑
居中方案
水平居中
行内元素
父元素设置text-align:center
定宽块元素
设置 margin 左右为 auto
块元素文本
居中设置text-align:center
不定宽块元素
设置 display 为 table,margin 左右为 auto 利用table标签的
长度自适应性
---即
不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定)
,因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
设置 display 为 inline 或 inline-block,按行内元素居中处理
给父元素设置float:left position:relative 和 left:50%,且: float隐性改成了display:inline-block使得div获得宽度自适应特性(这是关键),
本质是触发了BFC。所以换成 display:inline-block 或 display:flex也可以。或者不要float:left position:relative ,直接写成position:absolute等。
子元素设置 position:relative 和 left: -50% 来实现水平居中,
会溢出父元素盒模型
或者使用css3的transform: translateX(-50%),效果一样,
会溢出父元素盒模型
子元素还可以用 margin-left:-50% 来居中,但是这样会使子元素宽度变为实际宽度的1.5倍
垂直居中
父元素高度确定的单行文本
设置父元素的 height 和 line-height 高度一致。
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。
父元素高度确定的多行文本
设置父元素 display:table
用一个元素包裹多行标签元素,设置 display:table-cell 和 vertical-align:middle
父子元素高度未知
设置父元素 position:relative
设置子元素 position: absolute top: 50% transform: translateY(-50%)
flex(不兼容IE)
父元素设置
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
附:隐性改变display类型
元素(不论之前是什么类型元素,display:none 除外)
设置以下 2 个句之一:
position : absolute
float : left 或 float:right
元素的display显示类型就会自动变为以
display:inline-block
的方式显示,当然就
可以设置元素的 width 和 height 了
,且
默认宽度不占满父元素
。
本文参与
腾讯云自媒体分享计划
,分享自作者个人站点/博客。
原始发表:2018-02-01 ,如有侵权请联系
cloudcommunity@tencent.com
删除
前往查看
c++
css
本文分享自
作者个人站点/博客
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
本文参与
腾讯云自媒体分享计划
,欢迎热爱写作的你一起参与!
c++
css
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
关注
文章
0
获赞
0
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐