在网页设计中，经常会遇到将图片和文字居中对齐的需求。在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%);
}

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