Q&A
ハンバーガーメニューをクリックしたときに表示される画面を作っています
リストがすべて上寄りになっています これらを上下中央に持ってきたいのでulに{display:flex; align-items: center; flex-direction: column;}等を指定してみたのですが、上手くいきませんでした
どうすれば上下中央寄せにできるか教えていただきたいです
HTML
1<!DOCTYPE html> 2<html lang="ja" > 3 <head> 4 <meta charset="utf-8"> 5 <title>クリスタ初級</title> 6 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet"> 7 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 13 </head> 14 <body> 15 <header class="header"> 16 <h4>クリ☆スタ</h4> 17 <nav> 18 <div class="menu-list"> 19 <ul> 20 <li><a href="#">About</a></li> 21 <li><a href="#">Service</a></li> 22 <li><a href="#">Contents</a></li> 23 </ul> 24 </div> 25 </nav> 26 <i class="fas fa-bars"></i> 27 </header>
CSS
1@charset "UTF-8"; 2html{font-size:62.5%;} 3*,*::before,*::after{box-sizing: border-box;} 4body{font-family: "Roboto","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo sans-serif;} 5a{text-decoration: none;} 6.header{width:100%; height:74px; display:flex; justify-content:space-between; 7align-items: center; background-color:#1B1310; border-bottom:2px solid #fff;} 8.header h4{font-size:26px; color:#fff; margin-left:120px;} 9.header ul{margin-right: 93px;} 10.header li{font-size:16px; display:inline-block; padding:0px 27px;} 11.header a{color:#fff;} 12.fas{display:none!important;} 13.header p{color:white;} 14 15 .top-page{background:url(../img/fv-bgi@2x.jpg) no-repeat; height:740px; 16 background-size:cover; position: relative;} 17 .site-title{font-size:50px; color:#fff; font-weight:normal; 18 position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); 19 padding:35px 42px; border:2px solid #fff; letter-spacing:1px;} 20 21@media(max-width:700px){ 22 23 .header nav{position:fixed; top:0; background-color:orange; z-index:1; width:100%; height:665px;} 24 .header ul{margin-right:0px; } 25 .header li{display:block; border-bottom: solid 1px #333; width:100%; padding:0; 26 height:calc(242px/4); } 27 .header a{display:block; height:100%; display:flex; 28 justify-content: center; 29 align-items: center;} 30 .fas{display:block!important;} .fa-bars{color:white; font-size:25px; margin-right:15px;} 31 .header h4{margin-left:15px;} 32 .top-page{background:url(../img/fv-bgi_sp@2x.jpg) no-repeat; background-size:cover; margin-bottom:100px; 33 height:590px; 34 } 35 .site-title{font-size:30px; padding-top:30px; padding-bottom:30px;} 36}
回答2件
0
ベストアンサー
どうしたいのかよく分かりませんが、下記のようなことでしょうか。
css
1 .header nav{ 2 display:flex; 3 justify-content: center; 4 align-items: center; 5 }
投稿2021/02/13 05:11
総合スコア33790
0
ulのスタイルにjustify-content: centerを追加すると上下も中央になるはずです。
投稿2021/02/13 04:43
編集2021/02/13 04:46
総合スコア269
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/13 13:39