HTML 是一門用于構(gòu)建網(wǎng)頁(yè)和應(yīng)用程序的語(yǔ)言，能夠讓我們以多種方式定制網(wǎng)頁(yè)內(nèi)容的格式。其中，如何設(shè)置圖片對(duì)齊是一項(xiàng)基本任務(wù)。本文將分享如何使用 HTML 代碼來(lái)設(shè)置 4 張圖片對(duì)齊的方法。 首先，我們需要在 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">

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

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

上述代碼將對(duì) HTML 中所有使用了 p 標(biāo)記的段落應(yīng)用一個(gè)居中的對(duì)齊樣式。接下來(lái)，我們將對(duì)上述圖片進(jìn)行分類，并在其周圍包裝一個(gè)段落標(biāo)簽。

<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>

這將使得每個(gè)段落都具有兩個(gè)圖片。接下來(lái)，為第一個(gè)段落應(yīng)用左對(duì)齊屬性，為第二個(gè)段落應(yīng)用右對(duì)齊屬性。

<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) 來(lái)對(duì)第 n 個(gè)段落中的圖片應(yīng)用對(duì)應(yīng)的對(duì)齊屬性。在第一個(gè)段落中，我們將第一個(gè)圖片浮動(dòng)到左側(cè)，并在其右側(cè)添加 20 像素的留白。在第二個(gè)段落中，我們將第二個(gè)圖片浮動(dòng)到右側(cè)，并在其左側(cè)添加 20 像素的留白。 最終的 HTML 代碼應(yīng)如下所示：

<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>

這會(huì)在頁(yè)面上顯示出 4 張圖片，其中前兩個(gè)為左對(duì)齊，后兩個(gè)為右對(duì)齊。使用這種方法，我們可以輕松地定制任意數(shù)量的圖片排列方式，保證網(wǎng)頁(yè)內(nèi)容高效清新。