HTML怎么让ul中的li水平垂直居中

本文小编为大家详细介绍“HTML怎么让ul中的li水平垂直居中”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML怎么让ul中的li水平垂直居中”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

    <divclass="box">

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>

    </div>

    .box{

    width:100%;

    height:200px;

    border:1pxsolidred;

    }

    .boxul{

    height:200px;

    display:flex;

    flex-direction:row;

    justify-content:center;

    }

    .boxulli{

    list-style:none;

    height:200px;

    line-height:200px;

    }

    效果：

    垂直居中1.png

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

    <divclass="box1">

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>

    </div>

    .box1{

    width:100px;

    height:300px;

    border:1pxsolidred;

    }

    .box1ul{

    height:300px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    }

    .box1ulli{

    list-style:none;

    margin:0auto;

    }

读到这里，这篇“HTML怎么让ul中的li水平垂直居中”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。