ul の li を水平方向と垂直方向の中央に配置する方法についての詳細な図による説明

ul li タグはページ内でよく使用されます。今日、この記事では、li タグのちょっとしたトリックを紹介します。ul で li を水平方向と垂直方向に中央揃えする方法#。 ##、興味のある友人は参考にしていただければ幸いです。 カルーセル画像を作成する場合、下部の小さなドットまたは数字は ul の下の位置に配置されます。現在、小さなドットまたは数字は垂直方向の中央に配置される必要があります。 ul に水平方向と垂直方向の中央に 1 つの単純な li を書きます。

カルーセル画像には通常、左右のカルーセルと上下のカルーセルの 2 種類があり、ul の対応する li も水平配置と垂直配置に分けられます。

1. カルーセル画像は左右に回転し、水平に配置されます:

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

効果:

##2. カルーセル画像は上下に回転し、垂直に配置されます:

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

効果:

以上がul の li を水平方向と垂直方向の中央に配置する方法についての詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。