hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26HTML搜搜PHP网64°c
A+ A-
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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS怎样完成弹性盒中的元素居中对齐【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章