在網站開發的過程中，經常會遇到需要將圖片與文字對齊的情況。而在CSS中，有時候我們并不能輕易地將圖片與文字垂直對齊，可能會遇到圖片偏上或偏下的情況，下面就讓我們來一起探討如何實現CSS圖片于字的上下對齊。

img {
vertical-align: middle;
}

使用CSS的vertical-align屬性可以讓圖片與文字在垂直方向盡可能地對齊。默認情況下，圖片是基于基線對齊的，而字母“x”的下緣則是與基線重合的。所以，為了讓圖片垂直居中對齊，可以將其垂直對齊到父元素的中心線。

.parent {
display: flex;
align-items: center;
}

除了使用vertical-align屬性之外，我們也可以使用flex屬性來實現圖片與文字的對齊。將父元素的display屬性設置為flex，并且將align-items屬性的值設置為center，可以讓其垂直居中對齊。

需要注意的是，在使用vertical-align屬性時，如果圖片高度超過基線到下緣的距離，會導致圖片偏下；同樣地，在使用flex屬性時，如果父元素太小，也會導致圖片偏下。因此，為了避免這種情況的出現，需要合理地設置圖片的大小或者調整父元素的高度。

綜上所述，通過上述方法可以輕松地實現CSS圖片于字的上下對齊，既美觀又實用。