本文目錄導(dǎo)讀：

1. 使用Flexbox布局
2. 使用Grid布局
3. 使用相對定位和***定位

CSS如何對齊兩個(gè)圖片

在CSS中，我們可以使用多種方法來對齊兩個(gè)圖片，以下是一些常見的對齊方式：

使用Flexbox布局

Flexbox布局是一種非常靈活的布局方式，可以輕松地實(shí)現(xiàn)對齊兩個(gè)圖片，我們可以將兩個(gè)圖片元素放入一個(gè)Flex容器內(nèi)，并利用Flex屬性來調(diào)整它們的位置關(guān)系。

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.image1, .image2 {
  width: 50%;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)Flex容器，并將兩個(gè)圖片元素放入其中，通過調(diào)整align-items和justify-content屬性，我們可以控制圖片在容器內(nèi)的對齊方式，我們還設(shè)置了圖片的寬度為容器的50%，以確保它們能夠平均分配空間。

使用Grid布局

Grid布局是另一種非常強(qiáng)大的布局方式，也可以用來對齊兩個(gè)圖片，我們可以將兩個(gè)圖片元素放置在一個(gè)Grid容器內(nèi)，并利用Grid線來指定它們的位置。

.container {
  display: grid;
  align-items: center;
  justify-content: space-between;
}
.image1, .image2 {
  width: 50%;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)Grid容器，并將兩個(gè)圖片元素放入其中，通過調(diào)整align-items和justify-content屬性，我們可以控制圖片在容器內(nèi)的對齊方式，我們還設(shè)置了圖片的寬度為容器的50%，以確保它們能夠平均分配空間。

使用相對定位和***定位

我們還可以使用相對定位和***定位來控制兩個(gè)圖片的位置關(guān)系。

.image1 {
  position: relative;
  left: 0;
  top: 0;
}
.image2 {
  position: absolute;
  right: 0;
  top: 0;
}

在這個(gè)例子中，我們將***個(gè)圖片元素設(shè)置為相對定位，并將其位置設(shè)置為容器的左上角，我們將第二個(gè)圖片元素設(shè)置為***定位，并將其位置設(shè)置為容器的右上角，這樣，兩個(gè)圖片就可以分別位于容器的兩側(cè)，并且位置關(guān)系固定。