【マークアップ言語複数画像中央寄せについて】 HTML・CSS学習中です。メインの大きい画像の下に小さい画像を複数横並び中央に表示することをやりたいのですが、iPad表示にすると小さい画像複数は中央に移動せず、画像の左に固まったまま表示されます。 iPhoneサイズだと中央に表示されますが、いろんな方法を試してもどうしてもiPadサイズでは中央に表示されません。ソースコードも貼りますので、教えて頂けると助かります。又、まだ学習し始めですのでソースコードを見て頂き他にご指摘があれば学習の励みになります。よろしくお願い致します。「ソースコード↓」【HTML】 consept 【CSS】 main{ width: 100%; background-color: #ccffff; padding-bottom: 10px; } .main_img{ width: 100%; margin-top: 10px; text-align: center; } main li{ float: left; display: inline-block; } .main_img1, .main_img2, .main_img3, .main_img4{ box-sizing: border-box; } .main_img1{ margin-left: 50px; } .main_img{ margin-right: 50px; } main ul::after{ display: block; content: ""; clear: both; }

【マークアップ言語複数画像中央寄せについて】 HTML・CSS学習中です。メインの大きい画像の下

解決済

質問者：KOBA___
質問日時：2020/06/07 09:00
回答数：1件

【マークアップ言語複数画像中央寄せについて】

HTML・CSS学習中です。
メインの大きい画像の下に小さい画像を複数横並び中央に表示することをやりたいのですが、iPad表示にすると小さい画像複数は中央に移動せず、画像の左に固まったまま表示されます。
iPhoneサイズだと中央に表示されますが、いろんな方法を試してもどうしてもiPadサイズでは中央に表示されません。
ソースコードも貼りますので、教えて頂けると助かります。
又、まだ学習し始めですのでソースコードを見て頂き他にご指摘があれば学習の励みになります。
よろしくお願い致します。

「ソースコード↓」

【HTML】

<main>
<div class="consept">
<h2>consept</h2>
</div>
<div class="main_img">
<img src="../image/ryouri.jpg">
</div>

<ul>
<li>
<img src="../image/italy.jpg" class="main_img1" width="350px" height="350px">
</li>
<li>
<img src="../image/pasuta.jpg" class="main_img2" width="350px" height="350px">
</li>
<li>
<img src="../image/pizza.jpg" class="main_img3" width="350px" height="350px">
</li>
<li>
<img src="../image/drink.jpg" class="main_img4" width="350px" height="350px">
</li>
</ul>

【CSS】

main{
width: 100%;
background-color: #ccffff;
padding-bottom: 10px;
}
.main_img{
width: 100%;
margin-top: 10px;
text-align: center;
}

main li{
float: left;
display: inline-block;
}

.main_img1,
.main_img2,
.main_img3,
.main_img4{
box-sizing: border-box;

}
.main_img1{
margin-left: 50px;
}
.main_img{
margin-right: 50px;
}

main ul::after{
display: block;
content: "";
clear: both;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： gura_
回答日時：2020/06/07 23:56

KOBA___さん

･･･下に小さい画像を複数横並び中央に･･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
main{
background-color: #ccffff;
padding-bottom: 10px;
text-align: center;
}

main ul{
display:flex; justify-content:center; /* 小画像を中央横並び */
list-style:none;
}
.main_img img{
width:350px; height:350px;
}
.main_img1,
.main_img2,
.main_img3,
.main_img4{
margin: 5px;
width:150px; height:150px;
}

</style>
</head>
<body>
<main>
<div class="consept">
<h2>consept</h2>
</div>
<div class="main_img">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<ul>
<li>
<img src="https://oshiete.xgoo.jp/images/v2/common/profile … class="main_img1">
</li>
<li>
<img src="https://oshiete.xgoo.jp/images/v2/common/profile … class="main_img2">
</li>
<li>
<img src="https://oshiete.xgoo.jp/images/v2/common/profile … class="main_img3" >
</li>
<li>
<img src="https://oshiete.xgoo.jp/images/v2/common/profile … class="main_img4">
</li>
</ul>
</main>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早朝から失礼致します。
ご返答ありがとうございます。
guraさんのおかげで解決致しました！
本当にありがとうございます！
あと【デバイスの違いによるnavのweight幅】についても解決できないことがありまして、その内容も投稿させて頂きますので、もしよろしければご返答して頂けると助かります。
おこがましいお願いで申し訳ございません。

独学で学習しており、この度は本当に助かりました！
ありがとうございました！

通報する

お礼日時：2020/06/08 07:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！