許多網站中會使用到圖片，而且往往要求圖片與文本上下居中。通常，我們可以使用CSS將文本和圖片進行上下居中的處理。

img {
display: inline-block;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
}

上述代碼是一種簡單的方法來實現文本和圖片的上下居中。要想實現這個效果，需要將元素和

元素都設為inline-block，并對它們都使用vertical-align屬性來進行垂直居中。

然而，為了使圖片正確的放置位置，我們也需要在CSS中設置高度和寬度來適應圖片。

img {
display: inline-block;
vertical-align: middle;
height: Xpx;
width: Xpx;
}
p {
display: inline-block;
vertical-align: middle;
}

這里的Xpx是根據你的圖片尺寸來設定的。通過將圖片元素和段落元素設置為inline-block，可以實現它們的水平方向保持同一行。通過vertical-align可以實現圖片和文本垂直居中。通過設定高度和寬度，可以確保圖片在不同瀏覽器中具有相同的大小和比例。

實現圖片和文本的上下居中并不難，前提是你要熟悉CSS的基本屬性，如display和vertical-align。如果你需要針對其他元素進行上下居中的處理，也可以使用類似的CSS代碼。