首页 > 网站 > WEB开发 > 正文

在网页布局中合理使用inline formating context(IFC)

2024-04-27 14:35:43
字体:
来源:转载
供稿:网友
在网页布局中合理使用inline formating context(IFC)

引子:给大家出一个小小的考题,如何使用CSS来实现类似下面的在指定区域内,内容自适应的垂直居中。

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表