在CSS中，我們可以使用多種方法來實現字和圖片的水平居中，以下是兩種常見的方法：

1、使用flexbox布局

Flexbox是一種靈活的布局方式，可以輕松地實現對齊問題，我們可以將字和圖片放入一個flex容器中，并利用justify-content屬性來實現水平居中。

<div style="display: flex; justify-content: center;">
  <p>這是一段文字</p>
  <img src="圖片url" alt="圖片描述" />
</div>

在這個例子中，字和圖片將會被水平居中并排列在一行中。

2、使用text-align屬性

另一種方法是利用text-align屬性來實現文字的水平居中，同時結合margin屬性來使圖片與文字之間的間距更加美觀。

<div style="text-align: center; margin: 0 auto;">
  <p>這是一段文字</p>
  <img src="圖片url" alt="圖片描述" style="margin: 0 auto;" />
</div>

在這個例子中，文字將會被水平居中，而圖片則會在文字兩側均勻分布。

需要注意的是，在使用這些方法時，可能需要考慮一些瀏覽器兼容性問題，以確保在各種瀏覽器上都能得到良好的對齊效果，也可以結合使用其他CSS屬性來進一步優(yōu)化布局效果。