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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

645閲覧

flexで中央寄せにしているのに、中央寄せにならない

yura-asuha

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/01/24 14:54

flex conteinarで justify-content: center; align-items: center; を指定しているのですが、flex itemが中央寄せにならなくて、困っています。

画像右上のメニューのところです。
2本線が左寄せになってしまい、何が原因なのか考えてもわからず、質問させていただきました。

勉強のためにも助けていただけたら、幸いです。
よろしくお願いいたします。

イメージ説明

/*html*/ <body> <header class="header"> <a href="#"><img src="../recipe/images/header/header_logo.svg" class="logo"></a> <button type="button" class="hamburger-button"> <span class="bar"></span> <span class="bar"></span> <span class="button-menu">メニュー</span> </button> <ul class="hamburger-menu-list"> <li class="recipe"><a href="#">レシピ</a></li> <li class="tokushu"><a href="#">特集</a></li> <li class="ranking"><a href="#">ランキング</a></li> </ul> </header> /*css*/ @charset "utf-8"; body{ font-family:"Noto Sans JP",sans-serif; line-height:1.75; color:#333; } li{ list-style:none; } a{ color:#333; text-decoration:none; } img{ width:100%; height: auto; vertical-align: bottom; } .header{ position:fixed; top:0; width:100%; height: 60px; background-color: rgb(238,156,112,80%); display: flex; align-items: center; justify-content:space-between; padding: 13px 20px 19px; } .logo{ max-width: 269px; } .hamburger-botton{ position: fixed; top:16px; right: 20px; display:flex; flex-direction: column; justify-content: center; align-items: center; } .bar{ display: block; width:24px; height: 2px; background-color: #ffffff; } .bar:nth-child(1){ margin-bottom: 8px; } .button-menu{ font-size: 12px; color: #ffffff; } .hamburger-menu-list{ position:fixed; top:60px; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

class名のスペルミスでしょうか?

diff

1- .hamburger-botton { 2+ .hamburger-button { 3 position: fixed; 4 top: 16px; 5 right: 20px; 6 display: flex; 7 flex-direction: column; 8 justify-content: center; 9 align-items: center; 10 }

投稿2023/01/24 16:28

編集2023/01/24 16:29
Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yura-asuha

2023/01/24 22:05

早速の返答ありがとうございます。 なんてお恥ずかしい。 スペルミスでした。 お手数をおかけして、すいませんでした。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問