在網頁設計中，有時候需要將文字與圖片進行垂直對齊，這時候css就派上用場了。

對于文字，我們可以通過設置line-height屬性和height屬性相等來使文字垂直居中。例如：

p {
height: 100px;
line-height: 100px;
}

對于圖片，可以使用vertical-align屬性來設置圖片的垂直對齊方式。vertical-align屬性有多個值可選：

• top ：將圖像的頂部與父容器的頂部對齊。
• middle ：將圖像的中部與父容器的中部對齊。
• bottom ：將圖像的底部與父容器的底部對齊。
• text-top ：將圖像的頂部與父容器中的文本的頂部對齊。
• text-bottom ：將圖像的底部與父容器中的文本的底部對齊。

例如，如果想將圖片垂直居中，可以使用middle值。代碼如下：

img {
vertical-align: middle;
}

如果要垂直居中的圖片比文字高度小，還可以設置一個容器，然后使用flex布局來垂直居中。例如：

.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.container img {
/* 可以設置寬高等屬性 */
}

總結來說，我們可以通過設置line-height屬性和vertical-align屬性以及使用flex布局來實現圖片與文字的垂直對齊。