Question

好的，所以我回答了另一个关于我的图像居中的问题。我收到的任何建议（旧帖子）都没有解决问题。授予它，图像不再分散，占用不同的空间。它们在屏幕左侧排列在一起。我有十张照片。我试图获得两行三个居中的图像，并在两行的正上方或下方添加额外的照片。我拿出任何休息元素，因为他们似乎没有做任何事情。

＆＃13;

  div.gallery {
    margin: 5px;
    border: 5px solid white;
    width: 500px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
	color: yellow;
		
    }

    div.gallery:hover {
    border: 5px solid yellow;
    }

    div.gallery img {
    width: 100%;
    height: auto;
    }

    div.desc {
    padding: 15px;
    text-align: center;
    }

＆＃13;

<h1 class="work1"><center><a class="ex1">Photography Assignment</a></center></h1>
	
	

	
	<div class="gallery">
  	 <a target="_blank" href="images/SS1.png">
		<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
	 </a>
  	<div class="desc">An extreme close up of Margaret's bag</div>
	</div>	
	
	
	
	<div class="gallery">
  	<a target="_blank" href="images/SS2.png">
		<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
	</a>
  	<div class="desc">A picture of Margaret's bag</div>
	</div>		
	
	
	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS3.png">
	<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
	</a>
  	<div class="desc">A close up of Margaret against a pink house</div>
	</div>		
	
	
	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS4.png">
	<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
	</a>
  	<div class="desc">A medium shot of Margaret</div>
	</div>	
	
	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS5.png">
	<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
	</a>
  	<div class="desc">A medium long shot of Margaret</div>
	</div>	
	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS6.png">
	<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
	</a>
  	<div class="desc">A long shot of Margaret in motion</div>
	</div>	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS7.png">
	<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
	</a>
  	<div class="desc">An upward medium shot of Margaret</div>
	</div>	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS8.png">
	<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
	</a>
  	<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
	</div>	
	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS9.png">
	<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
	</a>
  	<div class="desc">A telephoto shot of Margaret</div>
	</div>	
	
	
	
	
	<div class="gallery">
  	 <a target="_blank" href="images/SS10.png">
	<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
	</a>
  	<div class="desc">A wide shot of Margaret</div>
	</div>

＆＃13;

Answer 1

我可以使用Flexbox通过以下更新获得所需的布局：

添加一个容器div以包裹所有10个图库div。

为新容器div添加此CSS：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
}

将width:30%;添加到div.gallery

以下是CodePen中的这些编辑： https://codepen.io/jessbodie/pen/OONpRE?editors=1100

请参阅好文章：“A Complete Guide to Flexbox”

如何将图像以三行为中心？

1 个答案: