为了账号安全,请及时绑定邮箱和手机立即绑定

一课全面掌握主流CSS布局

难度初级
时长 5小时 0分
学习人数
第二种,inline-block布局
.parent{text-align:center;height:300px;background:#ccc;}
.parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}
.child{display:inline-block;vertical-align:middle;background:#f00;width:100px;}
其实垂直居中至少还有两种布局方式:
第一种,absolute布局
.parent{position:relative;background:#ccc;width:100%;height:300px;}
.child{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;background:#f00;width:100px;height:100px;}
说的第二种的方式的缺点第一种方式不也有么?
老师讲的很好,跟着老师复习了一遍基础。github地址:https://github.com/MoonStartMan/CSS3-mainstream-layout.git
可以把transform:translateX(-50%)改成margin-left: -50%;

最新回答 / 百兽凯多00
right不要设置float:left,设置浮动会脱离文档流,就不会继承父级宽度了,自然宽度是0

讲师回答 / KingJ
不好意思,最近工作比较忙,一直没有来慕课网来看留言,实在是不好意思~课程的源代码早已经上传到GitHub上了,忘记贴出来了,地址:https://github.com/fullstack-kingj/css3-layout-course希望可以对学习这门课程有所帮助!
老师语速适中,咬字清楚;不错~~
首页上一页45678下一页尾页
¥48.00
立即购买
课程须知
1、提前了解和熟悉HTMLl/CSS等基础语法 2、建议对着视频反复练习,掌握每一个知识点。
老师告诉你能学到什么?
(1)居中布局:水平居中、垂直居中 (2)多列布局:两列布局、三列布局、圣杯布局、双飞翼布局 (3)全屏布局:等分布局、等高布局、全屏布局
加群二维码
  • 慕课前端核心用户群
  • QQ群号:908286289
  • 付费用户专享
  • 技术学习型社群

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消