Detaillierte grafische Erklärung zur horizontalen und vertikalen Zentrierung des Li in ul

Ul-Li-Tag wird häufig auf Seiten verwendet. In diesem Artikel erfahren Sie, wie Sie das Li in ul horizontal und vertikal zentrieren. Interessierte Freunde können darauf verweisen, ich hoffe, es wird Ihnen nützlich sein.

Wenn wir Karussellbilder schreiben, werden die kleinen Punkte oder Zahlen am unteren Rand platziert. Zu diesem Zeitpunkt müssen die kleinen Punkte oder Zahlen im Allgemeinen vertikal zentriert sein Wir werden ein einfaches Li schreiben, das horizontal und vertikal in der Straße zentriert ist.

Es gibt im Allgemeinen zwei Arten von Karussellbildern: das linke und das rechte Karussell sowie das Auf- und Ab-Karussell. Im Folgenden werden diese beiden Situationen separat erläutert.

1. Karussellbilder drehen sich nach links und rechts und sind horizontal angeordnet:

 <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    .box{
        width: 100%;
        height: 200px;
        border: 1px solid red;
        }
    .box ul{
        height: 200px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        }
    .box ul li{
        list-style: none;
        height: 200px;
        line-height: 200px;
        }

Effekt:

2. Karussellbilder drehen sich nach oben und unten und sind vertikal angeordnet:

  <div class="box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
        .box1{
            width: 100px;
            height: 300px;
            border: 1px solid red;
            }
        .box1 ul{
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            }
        .box1 ul li{
            list-style: none;
            margin: 0 auto;
            }

Effekt:

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung zur horizontalen und vertikalen Zentrierung des Li in ul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!