提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS怎样完成弹性盒中的元素居中对齐【css教程】,CSS弹性盒元素居中对齐

css完成元素对齐(居中对齐弹性盒的各项 <div> 元素),在我们网页设想中是较为罕见的一个功用结果。我们能够经由过程css中的align-items等相干css属性来完成。

引荐参考:《CSS教程》

下面我们就经由过程细致的代码示例,为人人引见css怎样完成弹性盒中元素居中对齐。

代码示例以下:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        #xyz {
            width: 200px;
            height: 250px;
            border: 1px solid black;
            display: -webkit-flex; /* Safari */
            -webkit-align-items: center; /* Safari 7.0+ */
            display: flex;
            align-items: center;
        }
        #xyz div {
            -webkit-flex: 1; /* Safari 6.1+ */
            flex: 1;
        }
    </style>

</head>
<body>
<div id="xyz">
    <div style="background-color:#99FF99;">内容1</div>
    <div style="background-color:#33CCFF;">一些文件的内容</div>
    <div style="background-color:#FF99FF;">内容2</div>
</body>
</html>

结果以下图:

或许替换一下宽度width为400px及背景色彩内容,结果又如:

上述代码中,我们要先运用display: flex;属性,让盒子具有弹性规划的属性。

align-items 属性定义flex子项在flex容器确当前行的侧轴(纵轴)方向上的对齐体式格局。

flex 属性用于设置或检索弹性盒模子对象的子元素怎样分派空间。

设置flex属性值为1则示意让一切弹性盒模子对象的子元素都有雷同的长度。

设置align-items属性值为center则示意元素位于容器的中间。弹性盒子元素在该行的侧轴(纵轴)上居中安排。(假如该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出雷同的长度)。

本篇文章就是关于css完成弹性盒子中元素居中对齐的结果引见,也很简单,愿望须要的朋侪有所协助!

以上就是CSS怎样完成弹性盒中的元素居中对齐的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS怎样完成弹性盒中的元素居中对齐【css教程】,CSS弹性盒元素居中对齐"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线