旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS怎样完成弹性盒中的元素居中对齐【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:92


导读:css完成元素对齐(居中对齐弹性盒的各项<div>元素),在我们网页设想中是较为罕见的一个功用结果。我们能够经由过程css中的align-items等相干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网别的相干文章!

标签:CSS弹性盒元素居中对齐