コンテンツを中央に寄せたいです

html
1
2 <body>
3    <div class="filter wrapper">
4      <ul class="flex">
5        <li class="flex-item">
6          <a href="#" data-filter="*" class="current button">ALL</a>
7        </li>
8        <li class="flex-item">
9          <a class="button" href="#" data-filter=".filter-1">カテゴリー１</a>
10        </li>
11        <li class="flex-item">
12          <a class="button" href="#" data-filter=".filter-2">カテゴリー２</a>
13        </li>
14        <li class="flex-item">
15          <a class="button" href="#" data-filter=".filter-3">カテゴリー３</a>
16        </li>
17        <li class="flex-item">
18          <a class="button" href="#" data-filter=".filter-4">カテゴリ−４</a>
19        </li>
20      </ul>
21    </div>
22    <!-- filter -->
23
24    <div class="wrapper grid isotope">
25      <div class="item filter-1">
26        <img src="images/menu1.jpg" alt="" />
27        <p>写真キャプション写真キャプション</p>
28      </div>
29      <div class="item filter-1">
30        <img src="images/menu2.jpg" alt="" />
31        <p>写真キャプション写真キャプション</p>
32      </div>
33      <div class="item filter-1">
34        <img src="images/menu3.jpg" alt="" />
35        <p>写真キャプション写真キャプション</p>
36      </div>
37    </div>
38    <!-- /.grid -->
39
40    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
41    <script src="./js/isotope.pkgd.min.js"></script>
42    <script src="./js/app.js"></script>
43  </body>

css
1@charset "UTF-8";
2
3/* 共通部分
4------------------------------- */
5html {
6  font-size: 100%;
7}
8body {
9  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
10    "ヒラギノ角ゴ Pro W3", sans-serif;
11  line-height: 1.7;
12  color: #432;
13}
14a {
15  text-decoration: none;
16}
17img {
18  max-width: 100%;
19}
20.flex {
21  list-style-type: none;
22  display: flex;
23}
24
25.wrapper {
26  max-width: 1100px;
27  margin: 0 auto;
28  padding: 0 4%;
29}
30
31/* ボタン */
32.button {
33  font-size: 0.5rem;
34  background: #0bd;
35  color: #fff;
36  border-radius: 5px;
37  padding: 18px 32px;
38}
39.button:hover {
40  background: #0090aa;
41}
42
43.grid {
44  margin-top: 6%;
45  margin-bottom: 50px;
46}
47.grid .item {
48  width: 20%;
49}
50
51/* MENU */
52.menu-content {
53  margin-top: 20%;
54}

js
1// Isotopeの初期化設定
2$(function() {
3  var $container = $(".isotope");
4  $(".isotope").isotope({
5    itemSelector: ".item",
6    masonry: {
7      columnWidth: 100
8    }
9  });
10
11  $(".filter a").click(function() {
12    $(".filter .current").removeClass("current");
13    $(this).addClass("current");
14
15    var selector = $(this).attr("data-filter");
16    $container.isotope({
17      filter: selector,
18      animationOptions: {
19        duration: 750,
20        easing: "linear",
21        queue: false
22      }
23    });
24    return false;
25  });
26});

上記jsを読みこむとコンテンツ全体が左によってしまい、中央にコンテンツが配置されません。よろしくお願いします。
https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.jsも読み込んでます。

Lhankor_Mhy

2020/03/18 08:27

スクリーンショットは、左に寄っているものですか？

gygy

2020/03/18 09:30 編集

わかりづらいですが、左右の赤い部分の余白が均等になるようにしたいです。

x_x

2020/03/18 09:34

このレイアウトですか？ https://isotope.metafizzy.co/layout-modes/masonry.html

gygy

2020/03/18 10:08 編集

そうですね。 https://isotope.metafizzy.co/layout-modes/masonry.html#fitwidth の方がしたいレイアウトに近いです。

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

回答1件

ベストアンサー

これでいかがでしょうか。

js
1    $(".isotope").isotope({
2      itemSelector: ".item",
3      masonry: {
4        columnWidth: 100,
5        fitWidth: true // これ
6      }
7    });