在CSS中，我們可以使用多種方法將文字和圖片進行對齊，以下是一些常見的對齊方法：

1、垂直對齊：

- 使用vertical-align 屬性對圖片進行垂直對齊。vertical-align: middle; 會將圖片垂直居中對齊。

- 可以通過設(shè)置圖片和文字的line-height 來實現(xiàn)垂直對齊，設(shè)置line-height: 20px; 可以使文字在20像素高的行上垂直居中。

2、水平對齊：

- 使用text-align 屬性對文字進行水平對齊。text-align: center; 會使文字水平居中對齊。

- 可以通過設(shè)置圖片的margin 來實現(xiàn)水平對齊。margin: 0 auto; 可以使圖片在左右兩邊等距的水平位置上。

3、綜合對齊：

- 使用 Flexbox 布局對文字和圖片進行綜合對齊，F(xiàn)lexbox 允許你輕松地在容器內(nèi)對齊子元素。display: flex; align-items: center; justify-content: center; 可以使文字和圖片在容器內(nèi)水平和垂直居中對齊。

4、使用 Grid 布局：

- Grid 布局也適用于將文字和圖片進行對齊，你可以通過定義網(wǎng)格的行和列來***控制元素的位置。display: grid; align-items: center; justify-content: center; 同樣可以使文字和圖片在容器內(nèi)水平和垂直居中對齊。

示例代碼

下面是一個使用 Flexbox 布局實現(xiàn)文字和圖片對齊的示例：

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

在這個示例中，display: flex; 聲明了 Flexbox 布局，align-items: center; 和justify-content: center; 使得圖片和文字在容器內(nèi)水平和垂直居中對齊。max-width: 500px; 確保圖片和文字的***大寬度不超過500像素，以適應(yīng)不同的屏幕大小。

更多資源

- [CSS Flexbox 文檔](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)

- [CSS Grid 文檔](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

- [CSS 圖片和文字對齊技巧](https://www.w3.org/Style/Examples/007/center.html)

希望這些資源能幫助你更好地理解和應(yīng)用CSS進行文字和圖片的對齊。