ul中li水平垂直居中

最新推荐文章于 2021-08-23 10:04:34 发布

qq_41737172

最新推荐文章于 2021-08-23 10:04:34 发布

阅读量362

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41737172/article/details/108340388

版权

1、轮播图左右轮播，li水平排列：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
.box{
    width: 100%;
    height: 200px;
    border: 1px solid red;
    }
.box ul{
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    }
.box ul li{
    list-style: none;
    height: 200px;
    line-height: 200px;
    }

2、轮播图上下轮播，li垂直排列：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
    .box1{
        width: 100px;
        height: 300px;
        border: 1px solid red;
        }
    .box1 ul{
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        }

    .box1 ul li{
        list-style: none;
        margin: 0 auto;
        }