CSS中，我們可以使用多種方法來(lái)對(duì)齊文字和圖片，以下是一些常見(jiàn)的方法：

1、使用vertical-align屬性：

- 這個(gè)屬性用于設(shè)置圖片與周?chē)鷥?nèi)容的垂直對(duì)齊方式。

- 你可以將圖片設(shè)置為與底部對(duì)齊（vertical-align: bottom），這樣文字就會(huì)出現(xiàn)在圖片的上方。

- 或者，你也可以將圖片設(shè)置為與頂部對(duì)齊（vertical-align: top），這樣文字就會(huì)出現(xiàn)在圖片的下方。

2、使用position屬性：

- 這個(gè)屬性允許你更***地控制圖片的位置。

- 通過(guò)設(shè)置position: relative，你可以將圖片定位在容器的特定位置，然后使用top、right、bottom和left屬性來(lái)調(diào)整圖片與容器邊緣的距離。

3、使用flexbox布局：

- Flexbox是一種現(xiàn)代的CSS布局方式，它允許你輕松地對(duì)齊容器內(nèi)的項(xiàng)目。

- 通過(guò)設(shè)置display: flex，你可以將圖片和文字放置在一個(gè)flex容器中，然后使用align-items和justify-content屬性來(lái)調(diào)整它們的位置。

4、使用grid布局：

- Grid布局是另一種現(xiàn)代的CSS布局方式，它允許你創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)。

- 通過(guò)設(shè)置display: grid，你可以將圖片和文字放置在一個(gè)grid容器中，然后使用align-items和justify-items屬性來(lái)調(diào)整它們的位置。

示例代碼

下面是一個(gè)使用flexbox布局對(duì)齊文字和圖片的示例：

<div style="display: flex; align-items: center; justify-content: center;">
  <img src="image.jpg" style="width: 200px; height: 200px;">
  <p style="margin: 0;">這是一段文字。</p>
</div>

在這個(gè)示例中，圖片和文字被放置在一個(gè)flex容器中，并使用align-items: center和justify-content: center屬性將它們居中，你還可以根據(jù)需要調(diào)整圖片和文字的其他樣式，如顏色、字體大小等。

圖片和文字垂直對(duì)齊示例

如果你想要圖片和文字垂直對(duì)齊，可以使用以下代碼：

<div style="display: flex; align-items: top;">
  <img src="image.jpg" style="width: 200px; height: 200px;">
  <p style="margin: 0;">這是一段文字。</p>
</div>

在這個(gè)示例中，圖片被設(shè)置為與頂部對(duì)齊（align-items: top），這樣文字就會(huì)出現(xiàn)在圖片的下方，你可以根據(jù)需要調(diào)整其他樣式。

圖片和文字底部對(duì)齊示例

如果你想要圖片和文字底部對(duì)齊，可以使用以下代碼：

<div style="display: flex; align-items: bottom;">
  <img src="image.jpg" style="width: 200px; height: 200px;">
  <p style="margin: 0;">這是一段文字。</p>
</div>

在這個(gè)示例中，圖片被設(shè)置為與底部對(duì)齊（align-items: bottom），這樣文字就會(huì)出現(xiàn)在圖片的上方，你可以根據(jù)需要調(diào)整其他樣式。