0
申し訳ありませんので、私は画像をセンタリングすることについてもう一度質問します。私が受け取ったアドバイス（古いポスト）は問題を解決しませんでした。それを与えると、イメージはもはや散らばっておらず、異なる量の空間を占有します。それらは画面の左側にお互いの上に並んでいます。私には10枚の画像があります。私は余分な写真を2つの行の真上または真下に置いて、3つの中心の画像の2つの行を達成しようとしています。彼らは何もしていないように見えるので、私は休憩の要素を取り出しました。どのように画像を3つの行の中央に配置するのですか？
div.gallery {
margin: 5px;
border: 5px solid white;
width: 500px;
\t font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
\t color: yellow;
\t \t
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}<h1 class="work1"><center><a class="ex1">Photography Assignment</a></center></h1>
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS1.png">
\t \t <img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
\t </a>
\t <div class="desc">An extreme close up of Margaret's bag</div>
\t </div> \t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS2.png">
\t \t <img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
\t </a>
\t <div class="desc">A picture of Margaret's bag</div>
\t </div> \t \t
\t
\t
\t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS3.png">
\t <img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
\t </a>
\t <div class="desc">A close up of Margaret against a pink house</div>
\t </div> \t \t
\t
\t
\t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS4.png">
\t <img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
\t </a>
\t <div class="desc">A medium shot of Margaret</div>
\t </div> \t
\t
\t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS5.png">
\t <img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
\t </a>
\t <div class="desc">A medium long shot of Margaret</div>
\t </div> \t
\t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS6.png">
\t <img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
\t </a>
\t <div class="desc">A long shot of Margaret in motion</div>
\t </div> \t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS7.png">
\t <img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
\t </a>
\t <div class="desc">An upward medium shot of Margaret</div>
\t </div> \t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS8.png">
\t <img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
\t </a>
\t <div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
\t </div> \t
\t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS9.png">
\t <img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
\t </a>
\t <div class="desc">A telephoto shot of Margaret</div>
\t </div> \t
\t
\t
\t
\t
\t <div class="gallery">
\t <a target="_blank" href="images/SS10.png">
\t <img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
\t </a>
\t <div class="desc">A wide shot of Margaret</div>
\t </div> \t
\t
'div.gallery {...;表示：インラインブロック; } ' – AlexP