CSS 圖片和文字一樣高 在網頁設計中，我們會經常遇到需要讓圖片和文字在同一行并且高度一致的情況。比如，我們可能需要在一個產品列表中放置產品的圖片和介紹文字，并讓它們的高度保持一致。 那么如何實現呢？這時，我們就可以使用 CSS 的一些特性來達到這個目的。 首先，我們可以使用 display 屬性將圖片和文字的容器設置為行內塊級元素，并設置其 vertical-align 屬性為 middle，這樣就可以使它們垂直居中。 接著，為了讓圖片和文字的高度一致，我們可以使用 line-height 屬性來控制它們的行高。具體來說，我們可以將圖片和文字的父級容器設置為一個固定的高度，然后將 line-height 屬性設置為與容器高度相同的值。這樣，不管圖片和文字的高度是多少，它們都會被限制為與容器高度相同。 下面是一段示例代碼：

<div class="product">
<img src="product-image.png" alt="Product Image">
<p>這里是產品介紹文字。</p>
</div>

在這個示例代碼中，我們將產品容器的高度設置為 150 像素，然后將圖片和文字的 line-height 屬性設置為 150 像素，這樣它們就同高了。同時，我們還使用了 vertical-align 屬性和 display 屬性來使它們垂直居中和并排顯示。 總的來說，使用 CSS 實現圖片和文字一樣高并不難，只要掌握了一些基本的 CSS 屬性和技巧，我們就能輕松地實現這個效果。