Detaillierte grafische Erläuterung der Methode zur vertikalen Zentrierung und horizontalen Zentrierung des Li-Gehalts in der Straße

Im Seitenlayout wird das li-Tag häufig für Listen, Navigation, Registerkarten usw. verwendet. Wissen Sie also, wie man das li in ul zentriert? In diesem Artikel erfahren Sie, wie Sie das Li in UL horizontal und den Li-Inhalt vertikal zentrieren. Interessierte Freunde können unten weiterlesen.

1. Der Li-Inhalt ist vertikal zentriert

Das Flex-Direction-Attribut gibt die Richtung des flexiblen Elements an. Wenn der Eigenschaftswert auf „Spalte“ festgelegt ist, werden die flexiblen Elemente vertikal angezeigt, genau wie eine Spalte. justify-content wird verwendet, um die Ausrichtung des flexiblen Boxelements in Richtung der Hauptachse (horizontale Achse) festzulegen oder abzurufen. Wenn sein Attributwert auf „center“ gesetzt ist, bedeutet dies, dass sich das Element in der Mitte des Containers befindet. Auf diese Weise kann die vertikale Zentrierung des Li-Gehalts im UL erreicht werden. Der Code lautet wie folgt:

HTML-Teil:

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

CSS-Teil:

<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. Der Li-Inhalt ist horizontal zentriert

Das Flex-Direction-Attribut gibt die Richtung des flexiblen Elements an. Wenn der Attributwert auf „Zeile“ (Standardwert) festgelegt wird, bedeutet dies, dass die flexiblen Elemente horizontal angezeigt werden, genau wie eine Zeile. justify-content wird verwendet, um die Ausrichtung des flexiblen Boxelements in Richtung der Hauptachse (horizontale Achse) festzulegen oder abzurufen. Wenn sein Attributwert auf „center“ gesetzt ist, bedeutet dies, dass sich das Element in der Mitte des Containers befindet. Auf diese Weise kann die horizontale Zentrierung des Li-Gehalts in ul erreicht werden. Der Code lautet wie folgt:

HTML-Teil:

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

CSS-Teil:

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

Zusammenfassung: Das Obige stellt die Methode zum Zentrieren des Inhalts des li-Tags in ul vor. Wenn es vertikal zentriert ist, verwenden Sie flex-direction: row; Diejenigen, die es nicht wissen, können es selbst ausprobieren und sehen, ob Sie den Effekt der Zentrierung des Li-Inhalts erzielen können. Ich hoffe, dieses Tutorial kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der Methode zur vertikalen Zentrierung und horizontalen Zentrierung des Li-Gehalts in der Straße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!