【htmlで画像を中心に置く方法について教えてください】

Question

実現したいこと

• 左寄りの画像を中心に置きたいです。

前提

ECサイト構築中で画像付きのカテゴリーを表示させたのですが
左寄りになっており、html初心者のため、中心にする方法がわかりません。
詳しい方おりましたらご教示お願いいたします。

該当のソースコード

<div class="row"> <style>.nms-plugin-20230204044302 .block { display: block; } .nms-plugin-20230204044302 ul { list-style: none; margin: 0; padding: 0; display: -webkit-flex; display: flex; /*-webkit-justify-content: space-around; justify-content: space-around;*/ -webkit-align-items: stretch; align-items: stretch; flex-wrap: wrap; }

.nms-plugin-20230204044302 .item-list li {
margin: 0 5px;
width:9%;
text-align: center;
}
.nms-plugin-20230204044302 .item-list li a img {
width:100%;
}
.nms-plugin-20230204044302 .item-list li a {
color: #333;
text-decoration: none;
text-align: center;
}
.nms-plugin-20230204044302 .item-list li a:hover {
opacity: 0.7;
}
@media (min-width: 320px) and (max-width: 768px) {
.nms-plugin-20230204044302 ul {
overflow-x: scroll;
justify-content: left;
flex-wrap:nowrap;
}
.nms-plugin-20230204044302 .item-list li {
margin-bottom: 10px;
width:22%;
}

}
</style>

<div class="nms-plugin-20230204044302"> <ul class="item-list" data-id="f0b9b08f-5b65-4ec5-adb4-c26b3bbe9522" isbind="1" data-level="1" data-id-use="4af16dbf-7c38-471f-a349-f9ddc4896399"> <li> <a href="$url$" target="_top"> <span> <img src="$imgurl$" alt="$name$" /> </span> <span> $name$ </span> </a> </li> </ul> </div> </div>

Answer 1

補足
元文にjustify-content: space-around;とありますがコメントアウトされているので無効な状態です。
もしかしたら使用されているテンプレート内の提示箇所以外の箇所に記載があるかもしれません。

Answer 2

.nms-plugin-20230204044302 ulのプロパティにdisplay: flex;とあるので、更にjustify-content:center;のプロパティを追記することで寄せる方向を設定できます。
参考:justify-content - CSS: カスケーディングスタイルシート | MDN

@media (min-width: 320px) and (max-width: 768px)とあるようにメディアクエリが別途存在するので、そちらにも必要であれば同様に追記が必要です。

で、それらを直したコード(改行も入れています)が下記のようになるのですが、
ここに書かれている以外にCSSが存在したり、該当箇所以外の要素によって位置がずれたりということがあるので、
ここの変更だけではうまくいかない可能性もあります。

.nms-plugin-20230204044302 .block { display: block; }
.nms-plugin-20230204044302 ul {
	list-style: none; margin: 0; padding: 0; display: -webkit-flex; display: flex; justify-content: center;
	 /*-webkit-justify-content: space-around; justify-content: space-around;*/
	-webkit-align-items: stretch; align-items: stretch; flex-wrap: wrap; }
.nms-plugin-20230204044302 .item-list li {
margin: 0 5px;
width:9%;
text-align: center;
}
.nms-plugin-20230204044302 .item-list li a img {
width:100%;
}
.nms-plugin-20230204044302 .item-list li a {
color: #333;
text-decoration: none;
text-align: center;
}
.nms-plugin-20230204044302 .item-list li a:hover {
opacity: 0.7;
}
@media (min-width: 320px) and (max-width: 768px) {
.nms-plugin-20230204044302 ul {
overflow-x: scroll;
justify-content: center;
flex-wrap:nowrap;
}
.nms-plugin-20230204044302 .item-list li {
margin-bottom: 10px;
width:22%;
}

}