CSS中的圖片和文字上下對齊是一個重要的設計元素，可以使網頁更加美觀和易讀。在設計網頁時，圖文的上下對齊是一個常見的問題。幸運的是，CSS提供了各種方法來實現這一目標。

img {
vertical-align: middle;
}
p {
display: table-cell;
vertical-align: middle;
}

其中，首先要注意的是圖片的垂直對齊。在CSS中，通過vertical-align屬性來實現。在圖像中添加vertical-align: middle;可以將圖像的底部與行內框盒子的中心對齊，從而實現圖像與文字的垂直居中。

然后，我們需要讓文本與圖像垂直居中。有兩種方法可以實現這個目標。第一種是使用display:table-cell屬性。通過將段落元素設置為表格單元格，然后使其垂直居中，可以將文本與圖像顯示在同一位置。

另一種方法是使用line-height屬性。通過將行高設置為與盒子高度相等，可以將文本垂直居中。但是需要注意的是，這種方法通常被用于單行文本。

.wrapper {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}

除了以上兩種方法外，CSS還提供了一種使用Flexbox的方法。 在父元素中使用display：flex和align-items：center，可以將子元素垂直居中，從而實現圖像與文本的上下對齊。

總之，實現CSS圖像和文本的上下對齊有許多方法。應根據特定的設計需求選擇最合適的方法，以實現最佳效果。