【html/CSS】ul liを箇条書きのまま中央寄せする方法

「箇条書きが短いから中央寄せしたい」

「箇条書きを一行のまま中央寄せしたい」

ul liを箇条書きのまま中央寄せする方法を解説します。

ul liを横並びメニューとして使いたい場合はこちら↓

長さを決めて中央寄せ

ulにwidthを指定し、margin:autoで中央寄せできます。

<style>
.example2{
    width: 200px;
    margin: auto;
}
</style>
<ul class="example2">
    <li>テキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

最長のliに合わせて中央寄せ

widthを数値指定した場合、文章が短い場合少し左に寄ってしまいます。

「width:fit-content」は子要素に幅を合わせるCSSです。

これを指定すると最長のliに合わせて中央寄せできます。

<style>
.example3{
    width: fit-content;
    margin: auto;
}
</style>
<ul class="example3">
    <li>テキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

逆にliが長すぎると中央寄せになりません。

必要に応じてmax-widthを数値指定して、文章が長い場合の最大サイズを決めるのもいいでしょう。

文字を中央寄せ

liに「width:fit-content」と「margin: auto」を指定すると文字を中央寄せできます。

<style>
.example li{
    width: fit-content;
    margin: auto;
}
</style>
<ul class="example">
    <li>テキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

文字の中央寄せといえば「text-align:center」ですが、これを指定すると点が左に寄ったままになります。

そこでliの長さを文字と合わせたうえで中央寄せすることで、点ごと中央寄せできます。

【まとめ】liを中央寄せする方法

長さを決めて中央寄せ

• ulまたはliに「width:数値」
• 「margin:auto」

最長のliに合わせて中央寄せ

• ulに「width:fit-content」
• 「margin:auto」
• 必要に応じて「max-width:数値」

文字を中央寄せ

• liに「width:fit-content」
• 「margin:auto」
• 必要に応じて「max-width:数値」

以上、ul liを箇条書きのまま中央寄せする方法でした。