通過CSS實現文本頂部對齊

在前端開發中，我們常常需要將多個文本區塊的頂部對齊，尤其是在展示類網頁中，如博客列表之類的頁面，讓每個區塊的標題位置對齊看起來更美觀。

通過設置文本的line-height屬性使文本垂直居中，即可實現文本頂部對齊。這是一種簡單而且易於實現的方法。

.title {
    font-size: 18px;
    line-height: 30px;
}

上述代碼中，line-height的值為所設置的文本高度，所以通過設置相同的line-height值，每個文本的垂直居中位置都一致，從而實現文本頂部對齊。

使用Flexbox布局是一種靈活而強大的方法，實現文本頂部對齊也不例外。

.container {
    display: flex;
    flex-direction: column;
}

.title {
    align-self: flex-start;
}

在這個例子中，我們使用一個包含所有文本的容器，並將其設置為Flexbox布局。然後，為了使每個文本頂部對齊，我們只需要在每個文本塊中添加align-self: flex-start;，即可讓該文本塊沿着交叉軸（即垂直方向）上距離其父元素頂部最近的位置對齊。

與Flexbox一樣，Grid布局也是一種適用於文本頂部對齊的強大選擇。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.title {
    align-self: start;
}

在這個例子中，我們使用了一個三列的網格布局，並將包含所有文本的容器設置為Grid布局。然後，通過添加align-self: start;，我們讓每個文本塊沿着縱軸（即垂直方向）上距離其父元素頂部最近的位置對齊。

儘管Table布局不太被推薦使用，但是在一些特殊情況下，使用Table布局也可以實現文本頂部對齊。


    
        Title 1
Text Text Text Text Text
        Title 2
Text Text Text Text Text
        Title 3
Text Text Text Text Text

將文本塊放置在Table中的單元格內，可以讓它們以適當的方式對齊。運用 vertical-align: top; 屬性，可以讓文本塊沿着交叉軸（即垂直方向）上距離單元格頂部最近的位置對齊。

通過使用不同的CSS布局，我們可以輕鬆實現文本頂部對齊的效果。以上方法各有優缺點，我們可以根據具體情況來靈活選擇，以達到最優的效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/306385.html

Title 1