Heim  >  Artikel  >  Web-Frontend  >  Detaillierte grafische Erklärung zur horizontalen und vertikalen Zentrierung des Li in ul

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

yulia
yuliaOriginal
2018-09-25 11:23:128616Durchsuche

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:

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

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:

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn