Header
Test
我有一個有標題和一些內容的頁面。標頭是一個動態值，根據內容可以有很多不同的內容。當標題較長並且需要兩行或更多行時，就會出現此問題。由於我希望內容保持在相同的垂直和水平位置，因此如果標題較短，我希望較長標題的最後一行與第一行處於相同的垂直位置。
我希望我能讓別人理解我自己。 請嘗試透過新增第二個字來編輯標題，您就會明白我的意思。
我認為這個問題可以用 flex-box 來解決，但我不知道如何解決，我已經用 flex-end 等嘗試了很多不同的東西。
這是我的程式碼範例：
.main {
display: flex;
justify-content: center;
min-height: 200px;
border: 1px solid black;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid red;
width: 200px;
height: 300px;
padding-top: 20px;
gap: 20px;
}
.header-div {
display: flex;
border: 1px solid blue;
align-items: center;
text-align: center;
max-width: 100px;
}
.header {
border: 1px solid green;
}
.content {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="header-div">
<h1 className="header">Header</h1>
</div>
<div class="content">Test</div>
</div>
</div>
</body>
</html>
提前致謝！
編輯 這是一張製作不佳的圖像，它說明了我的目標。 左圖是標題佔據一行時的情況，第二張圖是標題佔據兩行時的情況：
P粉4813668032024-03-23 00:51:03
更改 .wrapper 類別的 CSS：
.wrapper {
display: grid;
grid-template-rows: auto 1fr;
align-items: center;
justify-items: center;
border: 1px solid red;
width: 200px;
height: 300px;
padding-top: 20px;
gap: 20px;
}
在這裡，我們使用 display: grid 來建立網格佈局。 grid-template-rows 屬性定義兩行：一行用於標題，另一行用於內容。 auto 值將使標題行調整到內容高度，而 1fr 值將使內容行佔用剩餘空間。 align-items 和 justify-items 屬性使內容在各自的行中居中。
現在，更新您的 HTML，讓 h1 元素具有 class 屬性，而不是 className 屬性：
Parcel Sandbox
Header
Test
透過這些更改，標頭將保留在包裝器的頂部，並且內容將保持在相同的垂直和水平位置，無論標頭的長度如何。您可以透過更改標題文字來測試它，看看它在不同長度下的表現如何。