我是靠谱客的博主 花痴蜜蜂,这篇文章主要介绍ul中li内容垂直居中和水平居中的方法,现在分享给大家,希望可以做个参考。

1、li内容垂直居中

flex-direction属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:

HTML部分:
  


  

  •   
  • aa

  •   
  • bb

  •   
  • cc

  •   
  • dd

  •   

  

CSS部分:
  <styletype=“text/css”>

.box{
  width:300px;
  height:300px;
  border:1px solid red;
  }

.box ul{
  height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  }

.box ul li{

list-style:none;

margin:0 auto;

}

2、li内容水平居中

flex-direction属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:

HTML部分:

<divclass=“box”>

    • 今天心情不错
    • 今天心情不错
    • 今天心情不错
    • 今天心情不错
    • CSS部分:

      <styletype=“text/css”>

      .box{

      width:100%;

      height:200px;

      border:1pxsolid#000;

      }

      .boxul{

      height:200px;

      display:flex;

      flex-direction:row;

      justify-content:center;

      }

      .boxulli{

      list-style:none;

      height:200px;

      line-height:200px;

      }

      总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用flex-direction:column;如果是水平居中,就用flex-direction:row;

    最后

    以上就是花痴蜜蜂最近收集整理的关于ul中li内容垂直居中和水平居中的方法的全部内容,更多相关ul中li内容垂直居中和水平居中内容请搜索靠谱客的其他文章。

    本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
    点赞(67)

    评论列表共有 0 条评论

    立即
    投稿
    返回
    顶部