ul中li内容垂直居中和水平居中的方法

1、li内容垂直居中

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

HTML部分：
　　

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内容垂直居中和水平居中的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。