html - 如何将这些图片并排放置？

Question

我想知道如何编辑此代码以并排显示这些图片，每个下载按钮居中并位于每张图片下方，如果有人知道如何编辑此代码，我们将不胜感激。谢谢。

我上传代码的网站链接，可以在下面看到:

http://www.tekmillion.com/albums.html

.clearfix {
  clear: both;
}
.divWithBtn {
  float: left;
  text-align: center;
  padding: 10px;

}
.divWithBtn img,
.divWithBtn a{
  display: block;
  margin: 0 auto;
}

<HR>

<div class="container">
</br>
	<span class="textformat1"><center><b>Albums</b></span></center>
</br>

<center>
	<div class="clear">
		<div class="divWithBtn">
			<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" 					width="200" height="200">
		<a href="LONDON%202%20TURKEY%20VOL.1.zip">
			<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT		%20COVER)" width="200" height="200" border:none;>
			<a href="LONDON%202%20TURKEY%20VOL.2.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
	</div>
		<div class="divWithBtn">
			<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front					%20Cover)" width="200" height="200">
		<a href="LOVE%20%26%20HATE%20VOL.1.zip">
	<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" 		height="200">
	<a href="GURBET%20ELI%20VOL.1.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	</div>
</center>
</br>

Answer 1

将以下 CSS 添加到您的代码中:

此 css 将并排显示图像。

.divWithBtn {
    display: inline-block;
}

下面的css将使下载按钮位于图片下方。

.divWithBtn > a {
    display: block;
}

希望对您有所帮助。

注意:您在此处发布的当前 CSS 未应用。确保它应用于您的 html 元素。检查您的 css 文件的路径。