在網頁設計中，圖片和文字的排版是非常重要的一環。特別是在現代網站設計中，使用圖片來豐富網頁內容已經成為了一個潮流，而如何使這些圖片和文字恰好對齊則顯得尤為重要。在本文中，我們將介紹如何使用 CSS 實現圖片和文字底部對齊，希望對你有所幫助。 首先，我們可以通過將圖片和文字分別放入兩個 div 容器中來實現排版。在 HTML 代碼中，我們可以這樣寫：

<div class="wrapper">
<img src="image.jpg" alt="圖片">
<div class="text">這里是文字部分</div>
</div>

我們給這個 div 容器設置一個 class 名稱為 wrapper，將圖片和文字分別放入其中。為了實現底部對齊，我們需要對 wrapper 容器和 text 容器分別設置一些 CSS 樣式。

.wrapper {
position: relative;
display: inline-block;
}
.text {
position: absolute;
bottom: 0;
}

我們將 wrapper 容器設置為相對定位，以便使 text 容器能夠相對于 wrapper 容器定位。而 text 容器則設置為絕對定位，讓它能夠在 wrapper 容器內部自由移動位置。bottom: 0; 則表示將 text 容器底部與 wrapper 容器底部對齊。 這樣一來，無論圖片和文字的大小或者字數多少，它們始終能夠完美底部對齊。同時，為了進一步美化排版效果，我們也可以在 CSS 中設置一些額外的樣式，比如 text 容器的寬度、字體和顏色等等。 綜上所述，通過給 wrapper 容器和 text 容器設置相應的 CSS 樣式，我們可以實現圖片和文字的底部對齊。這不僅可以美化網頁排版效果，同時也能夠提高用戶的閱讀體驗。