Q&A
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; }
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/24 22:05