CSS中讓圖片和文字垂直居中，可以使用flex布局或者grid布局來實現(xiàn)。

1、使用flex布局：

<div style="display: flex; align-items: center;">
  <img src="圖片路徑" alt="圖片描述" style="max-width: 500px; height: auto;">
  <p style="margin-left: 10px;">文字內容</p>
</div>

在這個示例中，div元素使用了display: flex屬性來開啟flex布局，align-items: center屬性讓圖片和文字在垂直方向上居中。img元素設置了***大寬度為500px，高度自動調整，以適應不同的屏幕尺寸。p元素設置了左外邊距為10px，以確保文字與圖片之間有足夠的空間。

2、使用grid布局：

<div style="display: grid; align-items: center;">
  <img src="圖片路徑" alt="圖片描述" style="max-width: 500px; height: auto;">
  <p style="margin-left: 10px;">文字內容</p>
</div>

在這個示例中，div元素使用了display: grid屬性來開啟grid布局，align-items: center屬性讓圖片和文字在垂直方向上居中，與上一個示例類似，img元素設置了***大寬度為500px，高度自動調整，以適應不同的屏幕尺寸。p元素設置了左外邊距為10px，以確保文字與圖片之間有足夠的空間。

無論是使用flex布局還是grid布局，都可以實現(xiàn)圖片和文字垂直居中的效果，選擇哪種布局取決于具體的場景和需求。