
【マークアップ言語 複数画像中央寄せについて】
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;
}
No.1ベストアンサー
- 回答日時:
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>
早朝から失礼致します。
ご返答ありがとうございます。
guraさんのおかげで解決致しました!
本当にありがとうございます!
あと【デバイスの違いによるnavのweight幅】についても解決できないことがありまして、その内容も投稿させて頂きますので、もしよろしければご返答して頂けると助かります。
おこがましいお願いで申し訳ございません。
独学で学習しており、この度は本当に助かりました!
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
画像とテーブルの隙間をなくす。
-
cssで、チェックボックスの画像...
-
画像の一部を選択した時のみマ...
-
IE7だけに出る謎の空白(CSS)...
-
画像の横に文字をうまく配置で...
-
XML画像データををHTMLで簡単に...
-
html オンマウスで変化する画...
-
HTMLは、シングルクォートかダ...
-
スタイルシートで画像リンク時...
-
リンクをつけた画像をクリック...
-
IEでの”a img”の枠線について
-
プルダウンの選択リストの中に...
-
htmlの文字が縦書きになる
-
含む含まないという概念自体の...
-
複数のボタンを等間隔に、かつ...
-
ulタグやliタグの中でbrタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
ホームページのCSSとスパム...
-
機種依存文字、m2(平方メート...
-
サイトのサムネイル取得が出来...
-
アマゾンアファリエイトをカズ...
-
inputタグでサーバにデータを送...
-
固定タグ内の画像サイズの変更
-
ホームページで画像を横に並べ...
-
画像の横に文字をうまく配置で...
-
footerの背景が切れて、背景画...
-
画像をラジオボタンとして使用...
-
スタイルシートで画像を中央に...
-
この解答は合っていますか?
-
【HTML/CSS】ボタンの枠が伸び...
-
xhtmlでの画像サイズ指定につい...
-
CSSの左横に隙間ができてしまい...
-
アイフレームについて
-
html オンマウスで変化する画...
-
プルダウンの選択リストの中に...
おすすめ情報