图文详解ul中li内容垂直居中和水平居中的方法

2024-01-17 13:30 小编
    1、li内容垂直居中
    flex-direction属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:
    HTML部分:
    <divclass="box">
    <ul>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
    </ul>
    </div>
    CSS部分:
    <styletype="text/css">
    .box{
    width:300px;
    height:300px;
    border:1pxsolidred;
    }
    .boxul{
    height:300px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    }
    .boxulli{
    list-style:none;
    margin:0auto;
    }
    </style>


Tag: 方法 内容
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码