CSSグリッドで中央揃えができません。

前提・実現したいこと

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件

ベストアンサー

menuが300pxで固定なのでしたら

.menu {
  width: 300px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

で中央揃えになりませんか？
意図が違っていたらすみません。

投稿2019/08/16 05:18

takopo

総合スコア484

S_fujii

2019/08/16 05:19

解決しました！大変助かりました、ありがとうございます！！

takopo

2019/08/16 05:28 編集

無事解決できて良かったです！あと、.grid の justify-content: center; は必要ないので削除された方がいいかと思います。

S_fujii

2019/08/16 05:31

ありがとうございます、ご指摘の箇所を削除しました。素早い対応感謝です、本当に助かりました、ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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