ここから本文です

HTML、CSSでの写真の表示について ウィンドウの中心から写真を5つ横並...

アバター

ID非公開さん

2016/9/2011:24:33

HTML、CSSでの写真の表示について

ウィンドウの中心から写真を5つ横並びにして、段がつくように写真を表示させたいです!

ですが、HTMLでどう打ったらこのように表示できるのか調べてみても分かりませんでした・・・

イメージとしては□を画像として真ん中の□が必ずウィンドウの中心に来るようにしたいです!
□_□_□
_□_□_
HTMLとCSSは勉強し始めたばかりなのでよろしくお願いします!

ウィンドウ,img1.jpg&quot,img2.jpg&quot,div class,img class,div&gt,CSS

閲覧数:
53
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

kur********さん

2016/9/2011:58:08

ざっくりとですが。

CSS

/* 画像を同じサイズにする場合 */
img{
width : 200px;
height : 300px;
}

.warper{
margin : 0 auto;
max-width : 80%;
text-align : center;

}

.bottom-margin{
margin-bottom : 50px;
}

.title{
text-align : center;
}


HTML

<body>
<div class="warper">
<div class="image-box">
<img class="bottom-margin" src="img1.jpg"/>
<img src="img2.jpg"/>
<img class="bottom-margin" src="img3.jpg"/>
<img src="img1.jpg"/>
<img class="bottom-margin" src="img2.jpg"/>
</div>
<div class="title">たいとる</div>
</div>
</body>

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる