css box-align属性怎么用

css box-align属性用于指定box的子元素的对齐方式,例设置box-align:start,则对于正常方向的框,每个子元素是顶部对齐。对于反方向的框,每个子元素是底部对齐。目前没有浏览器支持 box-align 属性,但ie、firefox、safari和chrome都可通过私有属性来支持。

css box-align属性怎么用

css box-align属性怎么用?

box-align属性指定box的子元素如何对齐。

语法:

立即学习“前端免费学习笔记(深入)”;

box-align: start|end|center|baseline|stretch;

登录后复制

属性值:

start:对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。对于反方向的框,每个子元素的下边缘沿着框的底边放置。

end:对于正常方向的框,每个子元素的下边缘沿着框的底边放置。对于反方向的框,每个子元素的上边缘沿着框的顶边放置。

center:均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。

baseline:如果box-orient是内嵌单轴或横向,所有的子元素都置于他们的基线对齐

stretch:拉伸子元素以填充包含块。

注释:

目前没有浏览器支持 box-align 属性。Internet Explorer 10 通过私有属性 -ms-flex-align 支持。Firefox通过私有属性- MOZ-box-align支持。Safari和Chrome通过私有属性-WebKit-box-align支持。

css box-align属性 示例

nbsp;html> div{width:350px;height:100px;border:1px solid black;/* Internet Explorer 10 */display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-align:center;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari, Chrome, and Opera */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;}

我是居中对齐的。

注释:IE 不支持 box-pack 和 box-align 属性。

登录后复制

效果图:

1.jpg

以上就是css box-align属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2956906.html

(0)
上一篇 2025年3月12日 00:31:48
下一篇 2025年2月26日 14:21:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css column-count属性怎么用

    css column-count属性用于指定某个元素应分为的列数。如果给定列数,浏览器将在完全相同的列数内均匀分配内容。例设置column-count:3,则元素中的内容将分成3列显示。 css column-count属性怎么用? col…

    2025年3月12日
    200
  • css column-rule属性怎么用

    css column-rule属性是一个设置所有column-rule-*属性的简写属性,可以用于设置列之间的宽度,样式和颜色。 css column-rule属性怎么用? column-rule属性设置所有 column-rule-* 属…

    2025年3月12日
    200
  • css column-rule-color属性怎么用

    css column-rule-color属性指定元素分列显示时,列与列之间分隔线的颜色规则。注:要先设置好列之间的样式规则,颜色规则才能生效。 css column-rule-color属性怎么用? column-rule-color属性…

    2025年3月12日
    200
  • css list-style-image属性怎么用

    css list-style-image 属性用于指定图像作为有序或无序列表项的标志。通常使用 list-style-position 属性控制图像标记的位置。需始终规定一个 “list-style-type” 属性…

    2025年3月12日
    200
  • css list-style-type属性怎么用

    css list-style-type属性用于设置列表项标记的类型,可以通过不同的属性值设置不同的列表项标记。所有浏览器都支持 list-style-type 属性。 css list-style-type属性怎么用? list-style…

    2025年3月12日
    200
  • css margin-bottom属性怎么用

    css margin-bottom属性用于设置元素的下外边距,允许使用负值。所有主流浏览器都支持 margin-bottom 属性。 css margin-bottom属性怎么用? margin-bottom属性设置元素的下外边距。 可设置…

    2025年3月12日
    200
  • css margin-left属性怎么用

    css margin-left属性用于设置元素的左外边距,允许使用负值。所有主流浏览器都支持 margin-left 属性。 css margin-left属性怎么用? margin-left属性设置元素的左外边距。 可设置的属性值: 立即…

    2025年3月12日
    200
  • css margin-top属性怎么用

    css margin-top用于在网页中设置元素的上外边距,比如:margin-top: 50px;允许使用负值,所有主流浏览器都支持 margin-top 属性。 css margin-top属性怎么用? margin-top属性设置元素…

    2025年3月12日
    200
  • css outline-offset属性怎么用

    css outline-offset属性用于设置轮廓框架在 border 边缘外的偏移,即轮廓与边框边缘之间的距离。基本语法:outline-offset:length,length的单位可以是绝对单位(如px),也可以是相对单位(如:%)…

    2025年3月12日
    200
  • css overflow-x属性怎么用

    overflow-x属性用于指定当元素溢出内容区域时,是否对内容的左/右边缘进行裁剪。overflow-x 属性无法在 ie8 以及更早的浏览器正确地工作。 css overflow-x属性怎么用? overflow-x属性规定如果溢出元素…

    2025年3月12日
    200

发表回复

登录后才能评论