div與img對齊是在網頁開發中常遇到的問題之一。由于div常用于布局，而img則用于顯示圖像，所以在將圖像與其他元素進行對齊時會出現一些挑戰。下面將通過幾個代碼案例詳細解釋如何實現div與img的對齊。
第一個案例是將圖像居中對齊于一個div框中。我們可以使用CSS的屬性來實現這個效果。，我們需要給div框設置一個固定的寬度和高度，并且將其設置為相對定位。然后，給圖像設置為絕對定位，并使用top和left屬性將其放置到div框的中心。

html
<p>
<pre>
.container {
width: 300px;
height: 200px;
position: relative;
border: 1px solid #ccc;
text-align: center;
}
<br>
        .container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

通過上述代碼，我們可以將圖像居中對齊于一個300像素寬、200像素高的div框中。
第二個案例是將圖像水平居中對齊于一個div框中。我們可以使用CSS的屬性來實現這個效果。，我們還是要給div框設置一個固定的寬度和高度，并且將其設置為相對定位。然后，給圖像設置為塊級元素，并使用margin屬性將其水平居中。
html

.container {
width: 300px;
height: 200px;
position: relative;
border: 1px solid #ccc;
}
<br>
        .container img {
display: block;
margin: 0 auto;
}

通過上述代碼，我們可以將圖像水平居中對齊于一個300像素寬、200像素高的div框中。
第三個案例是將多個div框與圖像對齊。在這個案例中，我們有一個包含多個div框和圖像的父級容器，并且我們希望這些div框與圖像在水平方向上對齊。我們可以使用display: flex和justify-content屬性來實現這個效果。
`html

.container {
display: flex;
justify-content: space-around;
}
<br>
        .container div, .container img {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}

通過上述代碼，我們可以將多個div框與圖像在水平方向上進行對齊，并且它們之間的間距是相等的。
這些案例向我們展示了如何使用CSS來實現div與img的對齊。無論是將圖像居中對齊于div框中，還是將圖像水平居中對齊于div框中，亦或是將多個div框與圖像對齊，我們都可以使用一些簡單的CSS屬性來實現這些對齊效果。通過靈活運用這些技巧，我們可以輕松實現各種不同的布局需求。
參考文章： - "How to Center an Image in CSS: Exegesis and Needs Analysis" by Jeremy Ricketts - "How to Align a Div Horizontally in CSS" by David Gilbertson