本文摘自PHP中文网,作者青灯夜游,侵删。
【推荐教程:CSS视频教程 】
css中的box-align与box-pack属性可以用来设置框内元素的位置。
注意: 需要对齐的元素的父元素dispaly的值必须为box
box-align值为center时,子元素为垂直居中
box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。该属性规定水平框中的水平位置,以及垂直框中的垂直位置。
对于水平框,box-pack值为center时,子元素水平居中
HTML代码:
1 2 3 4 5 | < div id = "parent1" >
< div id = "div1" >
div1
</ div >
</ div >
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | div{
border : solid black 1px ;
}
#parent 1 {
width : 100% ;
height : 500px ;
display : -webkit-box;
display : -moz-box;
-webkit-box-align: center ;
-moz-box-align: center ;
-moz-box-pack: center ;
-webkit-box-pack: center ;
}
|
当box-pack值为justify时,子元素分散对齐
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < div id = "parent2" >
< div id = "div2" >
div2
</ div >
< div id = "div3" >
div3
</ div >
< div id = "div4" >
div4
</ div >
< div id = "5" >
div5
</ div >
< div id = "div6" >
div6
</ div >
</ div >
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 | #parent 2 {
width : 100% ;
height : 500px ;
display : -webkit-box;
display : -moz-box;
-webkit-box-align: center ;
-moz-box-align: center ;
-moz-box-pack: justify ;
-webkit-box-pack: justify ;
}
|
效果如下:
更多计算机编程相关知识,请访问:编程视频!!
以上就是聊聊css中box-align和box-pack属性的用法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5实践-使用css制作时间icon的具体详解(图)
css的优势是什么
炫酷的 css 边框动画,快来收藏吧!
css如何使用rem布局实现自适应效果
css怎么消除块元素
css3实现卡片效果
h5实现放大镜效果的代码
html怎么添加css样式?
css怎么实现心形
如何通过css设置背景图片全屏
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 聊聊css中box-align和box-pack属性的用法