好的,所以我回来了关于居中我的图像的另一个问题。我收到的任何建议(旧帖子)都没有解决这个问题。授予它,图像不再分散,占用不同的空间。他们在屏幕左侧彼此排列在一起。我有十个图像。我试图通过在两行上方或下方的额外照片实现三行中心图像的两行。我拿出了任何休息元素,因为他们似乎没有做任何事情。一个人如何将图像置于三行中?
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 {...;显示:inline-block; }' – AlexP