Q&A
前提・実現したいこと
Html・CSSでグリッドレイアウトを用いてレスポンシブなタイルレイアウトを作りたいです。
発生している問題・エラーメッセージ
ウィンドウ幅が十分にある時は良いのですが、ウィンドウ幅を狭めたときに、タイル要素が中央揃えされず左寄せになってしまいます。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>COFFEE SHOP</title> 6<link rel="stylesheet" href="css/style.css"> 7<meta name="viewport" content="width=device-width,initial-scale=1"> 8</head> 9 10<body> 11 <div class="container"> 12 <div class="grid menu_card"> 13 <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー"> 14 <p class="button">テキストテキスト</p> 15 </a> </div> 16 <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー"> 17 <p class="button">テキストテキスト</p> 18 </a> </div> 19 <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー"> 20 <p class="button">テキストテキスト</p> 21 </a> </div> 22 <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー"> 23 <p class="button">テキストテキスト</p> 24 </a> </div> 25 <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー"> 26 <p class="button">テキストテキスト</p> 27 </a> </div> 28 </div> 29 </div> 30</body> 31</html>
css
1@charset "UTF-8"; 2* { 3 margin: 0; 4 padding: 0; 5} 6li { 7 list-style: none; 8} 9a { 10 text-decoration: none; 11 color: #333; 12} 13img { 14 vertical-align: bottom; 15} 16.container { 17 max-width: 940px; 18 margin: 0 auto; 19} 20.grid { 21 display: grid; 22 gap: 10px; 23 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 24 justify-content: center; 25} 26/* menu */ 27.menu { 28 width: 300px; 29 margin-top: 20px; 30} 31.menu p { 32 width: 300px; 33 height: 80px; 34 background: #874e4c; 35 display: flex; 36 justify-content: center; 37 align-items: center; 38} 39.menu a { 40 font-weight: bold; 41 color: white; 42}
試したこと
cssコードの.gridにあるようにjustify-content: center;で中央寄せにしてみたのですが、うまくいきません。
アドバイス等頂けると大変助かります。
よろしくお願いいたします。
回答1件
0
ベストアンサー
menuが300pxで固定なのでしたら
.menu { width: 300px; margin-top: 20px; margin-left: auto; margin-right: auto; }
で中央揃えになりませんか？
意図が違っていたらすみません。
投稿2019/08/16 05:18
総合スコア484
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/16 05:19
2019/08/16 05:28 編集
2019/08/16 05:31