幅が不明な順序なしリストを中央に配置するにはどうすればよいですか?

幅が不明な順序なしリストを中央揃えにする

Web デザインでは、フッターにあるリンクなどのリンクのリストを水平方向に中央揃えにすることが望ましいことがよくあります。テキストを整列させるのは簡単ですが、幅を指定せずに順序なしリストを中央揃えにするのは難しい場合があります。

質問:

幅が不明な順序なしリストを水平方向に中央揃えするにはどうすればよいですか。リスト項目を上下に表示するのではなく、並べて表示する必要がある場所はどこですか?

答え:

オプション 1: インライン表示

リスト項目を表示: インラインに設定できる場合、解決策は簡単です:

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>

オプション 2: 位置指定で表示をブロック

If display: ブロックはリスト項目に使用する必要があります。次の CSS を考慮してください:

<code class="css">#footer {
  width: 100%;
  overflow: hidden;
}

#footer ul {
  list-style: none;
  position: relative;
  float: left;
  display: block;
  left: 50%;
}

#footer ul li {
  position: relative;
  float: left;
  display: block;
  right: 50%;
}</code>

以上が幅が不明な順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。