ulの横並びの画像を中央寄せにしたいです

前提・実現したいこと

初めての質問なので分かりにくかったらすみません。

現在会社のHP制作を練習していてulの横並びをするところまではできたのですが
それを中央に寄せたくてもできなくて困っています。
text:align、float、display:inline、positionなど調べて出てきたものを試してみましたが
どうしても左に寄ってしまいます。
親要素が左に寄っているかもと検索で出てきたのですが
親要素を中央寄せや大きくするのも出来ませんでした。

ご回答よろしくお願いします。

CSS
1#item {
2  display: block;
3}
4.contents {
5	display: flex;
6	flex-wrap:wrap;
7  }
8.contents li {
9	width: calc(100%/4);
10	padding:0 5px;
11	box-sizing:border-box;
12}
13.contents li img {
14	max-width:100%; 
15	height: auto; 
16	border:solid 1px #ccc; 
17  width: 15em;
18  height: 20em;
19}

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

回答1件

ベストアンサー

css
1
2.contents li {
3  text-align: center
4}

投稿2020/06/16 02:31

kyoya0819

総合スコア10429

suraimuuu

2020/06/16 02:36

ご回答ありがとうございます。試してみましたが出来ませんでした...

kyoya0819

2020/06/16 02:41

liを中央揃えにしたいのですか？ liの中のimgを中央揃えにしたいのですか？

suraimuuu

2020/06/16 02:46

liの中の画像を中央寄せにしたいのですが li{}、li img{}の中にtext-align:centerをいれても中央寄せ出来ませんでした。

kyoya0819

2020/06/16 02:46

HTMLのご提示をお願いします。

suraimuuu

2020/06/16 02:50

<div id="item"> <ul class="contents"> <li><img src=".png"></li> <li><img src=".png"></li> <li><img src=".png"></li> </ul> </div> です。

kyoya0819

2020/06/16 03:18 編集

imgのwidthの値が大きすぎる影響で、 max-width: 100%の記述に従っているのでは？値を極端に小さくしてみました。コード：https://codepen.io/asuchi0819/pen/vYLXeqw?editors=1100 ビュー：https://codepen.io/asuchi0819/full/vYLXeqw (liにtext-align: centerを当ててます。

kyoya0819

2020/06/16 03:18

画面幅が大きい端末でご覧ください。なるべく、パソコン。

suraimuuu

2020/06/16 04:06

ありがとうございます。ノートパソコンで見ましたが左に寄ってました... PCの問題なのでしょうか...

dit.

2020/06/16 05:06 編集

asuchi0819さんが提示してくださっているcodepenでの動作はどう見えていますか？また、確認で使用しているのブラウザのキャッシュクリア等はお試しになりましたか？提示されてるHTMLのliが3つで、「.contents li」のwidthを4で割っているのは意図がありますか？それとも省略しているとかでしょうか。

suraimuuu

2020/06/16 05:19

コメントありがとうございます。 codepenでも少し左に寄っています。キャッシュクリアもしてみましたが変わりませんでした。

kyoya0819

2020/06/16 05:39

背景色をつけてみましたが、liのことを言ってませんか？

kyoya0819

2020/06/16 05:40

色のついたボックスの右側の方が左側に比べて開いているということをおっしゃりたいのでは？

suraimuuu

2020/06/16 05:52

すみません、間違ってました！ asuchi0819さんの言う通り色のボックスを中央寄せにしたいです… お手数かけて申し訳ないです。