<div>元素是HTML中的一個常見標簽，用于創建一個容器，可以包含其他HTML元素。在默認情況下，<div>元素的文本內容是垂直居中的，但有時需要將文本居上顯示。本文將詳細說明如何使用CSS實現文本居上的效果。
，我們來看一下最常見的文本居上的方法。通過將<div>元素的display屬性設置為flex，并將align-items屬性設置為flex-start，可以使文本垂直居上。以下是示例代碼：

<div style="display:flex; align-items:flex-start;">
<p>文本內容</p>
</div>

上述代碼中，<div>元素的樣式為display:flex; align-items:flex-start;，這會使

元素的文本內容垂直居上顯示。現在，我們將通過更多的案例來進一步說明。
第二個案例是使用CSS的position屬性實現文本居上的效果。通過將<div>元素的position屬性設置為relative，并將

元素的position屬性設置為absolute，并使用top屬性將其置于<div>元素的頂部，即可實現文本居上的效果。以下是示例代碼：

<div style="position:relative;">
<p style="position:absolute; top:0;">文本內容</p>
</div>

上述代碼中，<div>元素的樣式為position:relative;，這會創建一個相對定位的容器。而

元素的樣式為position:absolute; top:0;，將其相對于<div>元素的頂部進行絕對定位。這樣，

元素的文本內容將會居上顯示。
第三個案例是使用CSS的display屬性與vertical-align屬性實現文本居上的效果。通過將<div>元素的display屬性設置為table，并將

元素的display屬性設置為table-cell，并使用vertical-align屬性將其置于頂部，可實現文本居上顯示。以下是示例代碼：

<div style="display:table;">
<p style="display:table-cell; vertical-align:top;">文本內容</p>
</div>

上述代碼中，<div>元素的樣式為display:table;，這會創建一個表格容器。而

元素的樣式為display:table-cell; vertical-align:top;，將其作為表格單元格，并使用vertical-align屬性將其置于頂部。這樣，

元素的文本內容將會居上顯示。
以上是三個常見的案例，用于實現文本居上顯示的效果。通過設置div元素的樣式和包含的p元素的樣式，可以靈活地控制文本的顯示位置。希望本文能夠幫助你理解如何使用CSS實現div文本居上的效果。