Detailed graphic explanation of the method of vertically centering and horizontally centering the li content in ul

In page layout, the li tag is often used. It can be used for lists, navigation, tabs, etc. So do you know how to center the li in ul? This article will tell you how to center the li in ul horizontally and how to center the li content vertically. Interested friends can continue reading below.

1. The li content is vertically centered

The flex-direction attribute specifies the direction of the flexible item. When its property value is set to column, the flexible items will be displayed vertically, just like a column. justify-content is used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction. When its attribute value is set to center, it means that the item is located in the center of the container. In this way, the vertical centering of the li content in the ul can be achieved. The code is as follows:

HTML part:

<div class="box">
    <ul>
	 <li>aa</li>
	 <li>bb</li>
	 <li>cc</li>
	 <li>dd</li>
    </ul>
</div>

CSS part:

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

Rendering:

2. The li content is horizontally centered

The flex-direction attribute specifies the direction of the flexible item. When setting its attribute value to row (the default value), it means that the flexible items will be displayed horizontally, just like a row. justify-content is used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction. When its attribute value is set to center, it means that the item is located in the center of the container. In this way, the horizontal centering of the li content in ul can be achieved. The code is as follows:

HTML part:

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

CSS part:

<style type="text/css">
	.box{
		width: 100%;
		height: 200px;
		border: 1px solid #000;
		}
	 .box ul{
		 height: 200px;
		 display: flex;
		 flex-direction: row;
		 justify-content: center;
		 }
	 .box ul li{
		    list-style: none;
		    height: 200px;
		    line-height: 200px;
		   }
</style>

Rendering:

Summary: The above introduces the method of centering the content of the li tag in ul. If it is vertically centered, use flex-direction: column; if it is horizontally centered, use flex-direction: row; for those who don’t know, you can Try it yourself and see if you can achieve the effect of centering the li content. I hope this tutorial can help you!

The above is the detailed content of Detailed graphic explanation of the method of vertically centering and horizontally centering the li content in ul. For more information, please follow other related articles on the PHP Chinese website!