質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

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

eng_46
eng_46

総合スコア11

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

340閲覧

投稿2022/01/21 13:58

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

1

ベストアンサー

float による横並べはやめましょう。10年前のテクニックです。
今は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}

投稿2022/01/22 01:45

hatena19

総合スコア32715

eng_46👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

eng_46

2022/01/22 02:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。