CSS div 對齊是網頁設計中常見的問題，它涉及如何使不同的div元素在頁面上垂直對齊。垂直對齊是使網站看起來更整潔、更專業的關鍵因素之一。在本文中，我們將詳細討論幾個CSS代碼案例，說明如何在不同的情況下實現div元素的垂直對齊。
案例一：頂部對齊 有時，我們希望將兩個或多個div元素放在一個容器內，同時使它們的頂部對齊。這種情況下，我們可以使用flexbox布局來實現。

<p>使用flexbox布局實現div元素的頂部對齊：</p>
<pre>
.container {
display: flex;
align-items: flex-start;
}

上述代碼中，我們給容器設置了flexbox布局，并使用align-items屬性將div元素的對齊方式設為flex-start，即頂部對齊。這樣，容器內的所有div元素都會頂部對齊。

案例二：底部對齊 與頂部對齊相反，有時我們需要將div元素底部對齊。同樣，flexbox布局也可以解決這個問題。

使用flexbox布局實現div元素的底部對齊：

.container {
display: flex;
align-items: flex-end;
}

通過將align-items屬性設為flex-end，我們可以將div元素的對齊方式設置為底部對齊。

案例三：垂直居中對齊 除了頂部和底部對齊之外，我們還可以將div元素在頁面上垂直居中對齊。同樣，我們可以使用flexbox布局來完成這個任務。

<p>使用flexbox布局實現div元素的垂直居中對齊：</p>
<pre>
.container {
display: flex;
align-items: center;
}

在這個例子中，我們將align-items屬性設為center，這樣div元素就會在容器中垂直居中對齊。

案例四：基線對齊 有時，我們需要將不同大小的文本在div元素中以基線對齊的方式顯示。為了實現這個效果，我們可以使用CSS的vertical-align屬性。

使用vertical-align屬性實現文本的基線對齊：

.container {
display: inline-block;
}
<br>
.text {
vertical-align: baseline;
}

在上述代碼中，我們將容器的display屬性設為inline-block，使其只占據文本所需的空間。然后，我們將文本的垂直對齊方式設為baseline，使其以基線對齊。

通過以上幾個案例的介紹，我們可以看到在不同的需求下，我們可以使用不同的技術來實現div元素的垂直對齊。這些技術包括使用flexbox布局來實現頂部、底部和垂直居中對齊，以及使用vertical-align屬性來實現基線對齊。通過靈活運用這些技術，我們可以輕松地在網頁設計中完成div元素的垂直對齊，使我們的網站看起來更加整潔和專業。