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

メニューボックスを真ん中に持ってきたいのですが、どのようにコードを書けばよいか分かりません。
教えていただきたいです。```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;
}

recal

2022/01/21 17:50 編集

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

eng_46

2022/01/22 00:56

失礼いたしました。 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> よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

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

CSS
1#nav {
2  list-style: none;
3  overflow: hidden;
4  margin: 0;
5  padding: 0;
6  display: flex; /* アイテムを横並べ */
7  justify-content: center;  /* アイテムを中央寄せ */
8  gap: 60px;  /* アイテム間の間隔 */
9}
10 
11#nav li {
12  width: 300px;
13  background-color: #99CCCC;
14  list-style: none; 
15  text-align:center;
16  height: 300px;
17  line-height: 300px;
18}