在網頁設計中，經常會遇到將圖片和文字居中對齊的需求。在CSS中，可以使用vertical-align屬性來實現垂直居中。

/* 父元素 */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 子元素 */
.child {
display: inline-block;
vertical-align: middle;
}

上面的代碼展示了一種使用flexbox的方法來垂直居中子元素。通過設置父元素的display為flex，再通過align-items和justify-content屬性來使子元素水平垂直居中。

不過，上述方法只適用于父元素為塊級元素的情況。如果父元素是行內元素，可以使用line-height屬性來實現垂直居中。設置line-height的值等于父元素的height即可使子元素垂直居中。

/* 父元素 */
.parent {
display: inline-block;
height: 50px;
line-height: 50px;
}
/* 子元素 */
.child {
display: inline-block;
vertical-align: middle;
}

最后，注意當父元素的高度小于子元素時，垂直居中的效果可能不盡如人意。此時可以考慮使用transform屬性來微調子元素的位置。例如：

/* 子元素 */
.child {
position: relative;
top: 50%;
transform: translateY(-50%);
}

使用上述方法，既可以垂直居中圖片文字，也可以垂直居中其他元素。