CSSでのメニューの中央配置方法

Question

メニューボックスを真ん中に持ってきたいのですが、どのようにコードを書けばよいか分かりません。
教えていただきたいです。```CSS

#nav {
  list-style: none;
  overflow: hidden;
}
 
#nav li {
  width: 300px;
  background-color: #99CCCC;
  float:left;
  margin:0 auto;
  list-style: none; 
  text-align:center;
  height: 300px;
  line-height: 300px;
  margin-right: 60px;
}
 
#nav li a {
  text-decoration: none;
  color: #EEFFFF;
  font-weight: bold;
  padding: 40px;
}

Comments

[recal]

htmlも追記してください。

また、質問文からでは、どの要素を何に対して中央にしたいのかもわかりませんし(メニューボックスという名称の要素は登場していない)
何がうまく行っていないのかもわかりません、補足お願いします。

[eng_46]

失礼いたしました。
navの要素が上手くいっていないです。
HTMLはこちらです。

<ul id="nav">
<li><a href="#">Places</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Access</a></li>
</ul>
</body>
</html>

よろしくお願いします。

Answer 1

float による横並べはやめましょう。１０年前のテクニックです。
今はFlexレイアウトが使えます。

#nav {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex; /* アイテムを横並べ */
  justify-content: center;  /* アイテムを中央寄せ */
  gap: 60px;  /* アイテム間の間隔 */
}
 
#nav li {
  width: 300px;
  background-color: #99CCCC;
  list-style: none; 
  text-align:center;
  height: 300px;
  line-height: 300px;
}

Comments

[eng_46]

ありがとうございます。初心者のため、インターネット検索で出てきたfloatを使用しておりました。
大変助かりました。