”画像の一覧表示”で画像を画面の中央（上下左右均等）に配置したい

Ruby on Railsで猫のフリー画像を表示するアプリケーションを作成しています。
スマートフォンで表示した時、若干画像の位置がずれてしまい、修正したいです。

PCでの表示

スマホでの表示

該当コード

ビュー

<% @posts.each do |post| %>
  <%= link_to(post_path(post)) do %>
    <span class="photos-index">
      <%= image_tag post.photos.first.image.url(:medium) %>
    </span>
  <% end %>
<% end %>

CSS

.photos-index {
  display: inline-block;
  margin: 20px;
}

@media screen and (max-width: 768px) {
  .photos-index {
    text-align: center;
  }
}

application.html.erb

中略
<body>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <%= render 'layouts/navbar' %>
    <%= render 'layouts/flash' %>
    <div class="container">
      <%= yield %>
    </div>
    <%= render 'layouts/footer' %>
  </body>

スマホで表示した時に上下左右均等に画像を配置したいです。
ご教授頂ければ幸いです。よろしくお願いします。

追記

赤線を引いた部分が「paddingを取り除きたい部分」です。containerで適用されているらしいのですが、チェックを外しても変わりませんでした、、、

siruku6

2019/09/23 03:58

開発中に画面を確認するために使用しているブラウザは何でしょうか？ ChromeかFirefoxであれば多少は、解決手法をお伝えできるかもしれません。

kousuke24

2019/09/23 05:19

ブラウザはGoogle Chromeを使用しています。スマホ画面は検証を利用して確認しています！ご教授頂ければ幸いです。

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

回答1件

ベストアンサー

開発者ツールのことは既にご存知のようですので、それを開ける前提で話していきます。

まず、下の画像の①をクリックして、その後②で気になる要素（今回は画像ですね）にカーソルを合わせてみましょう。
そうすると、おそらく、薄緑色に塗られる部分があると思います。
それが、paddingだったりmarginだったりするのですが、自分でそれは調べる必要があります。

その状態で気になる要素をクリックすると、下の画像のように、その要素に適用されているCSSが一覧できるようになります。
この赤枠内のCSSについては、チェックボックスで適用を切ったり、逆にダブルクリックすればCSSを変更したりその場で追記することも可能なので便利です。
ソースコードをいじることなく、次々にCSSを試すことができます。

この状態で色々試してみてはいかがでしょう。
その上で左右中央にするための障害が出てきたり、そもそも中央寄せにする方法を調べてもわからないということであれば、質問に追記されるとよいと思います。

投稿2019/09/23 05:48

編集2019/09/23 08:15

siruku6

総合スコア1382

kousuke24

2019/09/23 06:12

詳しい説明ありがとうございます！ containerにpadding15pxが適用されているようだとわかりました。ただ、containerのpaddingのチェックを外しても画面に変化がなく、他に適用されそうなcssもかいていないので画像のずれを起こしている箇所がわかりませんでした。追記に実際の画面の画像を乗せておきます。

siruku6

2019/09/23 08:22

画像拝見しました。赤枠のすぐ下にも同じCSSが適用されているのが見えますか？このように、bootstrapなどのテンプレートを使うと何重にも同じCSSが適用されていることがあるので、それを全て適用解除しないと元の姿には戻りません（画面に映っていないようなもっと下にもあることもあります）それはそれとして、開発者ツール上ではなく、実際にソースでpaddingを打ち消すのであれば、以下の2つのうちどちらかの方法をとることになると思います。１　.container よりも優先度の強いCSSを作成して、そこでpadding 0; などと設定する CSSの優先度決定ルールはこちらを参照 http://www.htmq.com/csskihon/007.shtml ２　.containerの中に画像を入れるのはやめる試してみてください。

kousuke24

2019/09/23 13:50

色々試して見たら整えることができました！丁寧なご説明ありがとうございました。

siruku6

2019/09/23 15:22

よかったです！ CSSとの格闘を私の代わりにしてくれる日本人が増えるのを期待しています(笑)

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