Explication graphique détaillée de la méthode de centrage vertical et horizontal du contenu li dans ul

Dans la mise en page, la balise li est souvent utilisée. Elle peut être utilisée pour les listes, la navigation, les onglets, etc. Alors savez-vous comment centrer le li dans ul ? Cet article vous expliquera comment centrer le li dans ul horizontalement et comment centrer le contenu du li verticalement. Les amis intéressés peuvent continuer à lire ci-dessous.

1. Le contenu li est centré verticalement

L'attribut flex-direction spécifie la direction de l'élément flexible. Lorsque la valeur de sa propriété est définie sur colonne, les éléments flexibles seront affichés verticalement, tout comme une colonne. justifier-content est utilisé pour définir ou récupérer l'alignement de l'élément de boîte flexible dans la direction de l'axe principal (axe horizontal). Lorsque sa valeur d'attribut est définie sur center, cela signifie que l'élément est situé au centre du conteneur. De cette manière, le centrage vertical du contenu li dans l'ul peut être obtenu. Le code est le suivant :

Partie HTML :

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

Partie CSS :

<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>

Rendu :

2. Le contenu li est centré horizontalement

L'attribut flex-direction spécifie la direction de l'élément flexible. Lorsque vous définissez sa valeur d'attribut sur row (la valeur par défaut), cela signifie que les éléments flexibles seront affichés horizontalement, tout comme une ligne. justifier-content est utilisé pour définir ou récupérer l'alignement de l'élément de boîte flexible dans la direction de l'axe principal (axe horizontal). Lorsque sa valeur d'attribut est définie sur center, cela signifie que l'élément est situé au centre du conteneur. De cette manière, le centrage horizontal du contenu li dans ul peut être obtenu. Le code est le suivant :

Partie HTML :

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

Partie CSS :

<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>

Rendu :

Résumé : ce qui précède présente la méthode de centrage du contenu de la balise li dans ul. Si elle est centrée verticalement, utilisez flex-direction : si elle est centrée horizontalement, utilisez flex-direction; :row; Je ne comprends pas Mes amis, vous pouvez l'essayer vous-même et voir si vous pouvez obtenir l'effet de centrer le contenu li. J'espère que ce tutoriel pourra vous aider !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!