はじめに

プログラミング学習中の@kat_logと申します。

自作アプリにてdiv内に、画像を真ん中に置きたいのに右に空白ができてしまい困っていたのですが、解決したため情報共有です。

（アプリはRuby on Railsを使って作成しているためRailsのコードで記載をしています）

結論

画像のclassにcontainerを設定すると解決しました。

試したこと（解決せず）

まだまだ学習中で色々試しました💧

object-center
bg-center
justify-center
origin-center
justify-items-center
justify-self-center
content-center
items-center
self-center
place-items-center
widthいじり・・・

ビフォー　（解決前）

画像が四角の中の左に寄っています↓

見栄え

コード

container未指定です

<div class="m-5 rounded-xl ">
	<%= link_to image_tag(ranking['mediumImageUrls'][0],
		{ class:"rounded-xl hover:opacity-75"}),
		ranking.url, target: :_blank, rel: "noopener noreferrer" %>
</div>

アフター　（解決後）

コード

containerを指定しています↓

<div class="m-5 rounded-xl ">
	<%= link_to image_tag(ranking['mediumImageUrls'][0], 
		{ class:"rounded-xl hover:opacity-75 container"}), 
    ranking.url, target: :_blank, rel: "noopener noreferrer" %>
</div>

見栄え

画像がちょうどいい感じに配置されています↓

以上です！

おわりに

どなたかの参考になれば嬉しいです！
お読みいただきありがとうございました！😄

参考