HTML 是一門用于構建網頁和應用程序的語言，能夠讓我們以多種方式定制網頁內容的格式。其中，如何設置圖片對齊是一項基本任務。本文將分享如何使用 HTML 代碼來設置 4 張圖片對齊的方法。 首先，我們需要在 HTML 中插入 4 張圖片的代碼：

<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">

為了讓這些圖片對齊，我們需要使用 CSS 樣式表中的 text-align 屬性。該屬性定義了一個盒子中的內容在水平方向上的對齊方式。

<style>
p {
text-align: center;
}
</style>

上述代碼將對 HTML 中所有使用了 p 標記的段落應用一個居中的對齊樣式。接下來，我們將對上述圖片進行分類，并在其周圍包裝一個段落標簽。

<p>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</p>
<p>
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</p>

這將使得每個段落都具有兩個圖片。接下來，為第一個段落應用左對齊屬性，為第二個段落應用右對齊屬性。

<style>
p:nth-of-type(1) img {
float: left;
margin-right: 20px;
}
p:nth-of-type(2) img {
float: right;
margin-left: 20px;
}
</style>

上述代碼使用 CSS 選擇器 :nth-of-type(n) 來對第 n 個段落中的圖片應用對應的對齊屬性。在第一個段落中，我們將第一個圖片浮動到左側，并在其右側添加 20 像素的留白。在第二個段落中，我們將第二個圖片浮動到右側，并在其左側添加 20 像素的留白。 最終的 HTML 代碼應如下所示：

<style>
p {
text-align: center;
}
p:nth-of-type(1) img {
float: left;
margin-right: 20px;
}
p:nth-of-type(2) img {
float: right;
margin-left: 20px;
}
</style>
<p>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</p>
<p>
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</p>

這會在頁面上顯示出 4 張圖片，其中前兩個為左對齊，后兩個為右對齊。使用這種方法，我們可以輕松地定制任意數量的圖片排列方式，保證網頁內容高效清新。