CSS對齊圖片和文字是Web開發中需要掌握的基本技能，可以幫助網站更加美觀和易于閱讀。下面我們將介紹如何對齊圖片和文字。

p {
display: flex;
align-items: center;
/*在水平方向居中*/
}
img {
vertical-align: middle;
/*在垂直方向居中*/
}

以上CSS代碼可實現將文字與圖片在同一行中居中對齊的效果，即使圖片和文字大小不同，也能夠完美對齊。下面我們分別解釋一下具體作用。

display: flex;

該屬性是CSS3新增的Flex布局方式，即彈性盒子布局。在這里我們使用了彈性布局來使圖片和文字在同一行。

align-items: center;

該屬性是指居中對齊。在這個樣式中，我們將圖片和文字都包括在父元素p中，所以父元素也需要具有居中對齊的屬性才能實現垂直方向的居中對齊。

vertical-align: middle;

這個屬性是指圖片垂直方向的居中對齊。特別要注意的是，它只適用于行內元素，而不是塊級元素。因此，img標簽必須要設置為“display: inline-block;”或“display: inline;”。

總之，使用Flex布局來對齊圖片和文字可以讓網站更加美觀和易于閱讀。以上CSS代碼可在不同的網站設計項目中靈活使用。