box-align和box-pack的使用

14 篇文章 0 订阅
8 篇文章 0 订阅

通过使用 box-align(垂直) and box-pack(水平) 属性,居中 div 框的子元素:

(1)这样可以很简单的模拟对话框水平居中效果一:

这里写图片描述
1、目前没有浏览器支持box-align属性
2、firefox支持替代的-moz-box-align属性
3、safari opera 以及chrome支持替代的-webkit-box-align属性

(2)语法:box-align: start|end|center|baseline|stretch;

start:对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。
对于反方向的框,每个子元素的下边缘沿着框的底边放置。
end:对于正常方向的框,每个子元素的下边缘沿着框的底边放置。
对于反方向的框,每个子元素的上边缘沿着框的顶边放置。
center:均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。
baseline:如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。
stretch:拉伸子元素以填充包含块

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值