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

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>

2、li内容水平居中 

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

HTML部分:

<divclass="box">
  <ul>
   <li>今天心情不错</li>
   <li>今天心情不错</li>
   <li>今天心情不错</li>
   <li>今天心情不错</li>
  </ul>
</div>

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;
  }
</style>

发表评论

© 2021 狸玖技术站 - 基于 WordPress