# Day 56：切版實作——垂直置中、文字段落行距、雙欄排版

**Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/)
**Published on:** 2026-02-09
**URL:** https://paragraph.com/@gcake/day-56

## Content

完成切版成果 實作重點: 不使用 Flexbox/Grid 的傳統排版技巧核心技術 1: Position Absolute 垂直置中問題情境需要讓 <header> 裡的 <nav> 垂直置中,但不能使用 flex 或 grid。解決方案: 絕對定位 + Transform 位移header { position: relative; /* 成為定位參考點 */ } header nav { position: absolute; top: 50%; /* 上緣對齊 header 的 50% 高度 */ transform: translateY(-50%); /* 往上移自己高度的 50% */ left: 300px; /* 水平定位 */ } 三步驟理解垂直置中原理步驟 1: top: 50% 讓上緣對齊中線┌──────────────────────┐ │ header │ │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ← 50% 高度 │ ┌──────────┐ │ │ │ nav │ │ ← nav 的上緣在這裡 │ └──────────┘ │ └──────────────────────┘ 此時 nav 的上緣對齊 header 高度的一半,但視覺上偏下。步驟 2: transform: translateY(-50%) 往上移自己高度的一半┌──────────────────────┐ │ header │ │ ┌──────────┐ │ │ ─ ─ │ nav │─ ─ │ ← nav 的中心線對齊 header 中心線 │ └──────────┘ │ └──────────────────────┘ translateY(-50%) 的 -50% 是相對於 nav 自己的高度,不是 header 的高度。 developer.mozilla步驟 3: 完美置中nav 的中心點現在精準對齊 header 的中心點,實現垂直置中效果。核心概念1. position: absolute 的三大影響脫離 Normal Flow: 元素不再佔據版面空間定位參考點改變: 變成最近的 position: relative 祖先Margin 語義改變: margin-left 的參考點從「前一個元素」變成「父容器左邊界」stackoverflow2. left vs margin-left (定位元素專用)屬性語義適用場景left從參考點定位✅ position: absolute/fixed 時更語意清晰margin-left推出空白所有元素通用,但在定位時語義較弱最佳實踐: 元素已經 position: absolute 時,優先用 left/right/top/bottom 表達定位意圖。 sitepoint其他不用 Flex/Grid 的垂直置中方法方法 2: Line-height 法header { height: 80px; line-height: 80px; /* 與高度相同 */ } header nav { display: inline-block; vertical-align: middle; line-height: normal; /* 重設 line-height */ } 限制: 需要固定高度,不適合響應式設計。方法 3: Table-cell 法header { display: table; } header nav { display: table-cell; vertical-align: middle; } 限制: 語義較差,且 display: table 有其他副作用。核心技術 2: 按鈕置中 + 文字左對齊問題情境有一個按鈕區塊 .try-it-btn 包含:<h2>: 橘色按鈕顯示 "TRY IT NOW!"<p>: 按鈕下方的說明文字需求:整個按鈕區塊在頁面中視覺上置中<p> 文字要對齊按鈕的左邊緣(不是置中).hero-intro 內的標題和段落文字都要左對齊解決方案1. 按鈕區塊內部設定section .try-it-btn { text-align: left; /* 內部元素左對齊 */ display: inline-block; /* 容器縮到內容寬度 */ margin-top: 0px; } section .try-it-btn h2 { display: block; /* 獨占一行 */ padding: 20px 30px; background-color: orange; color: white; font-weight: bold; border-radius: 5px; } section .try-it-btn p { display: block; /* 獨占一行,自動對齊左邊緣 */ font-size: 16px; margin-left: 0; } 2. 父容器設定(讓按鈕區塊置中)section .hero-intro { display: inline-block; width: 50%; vertical-align: top; text-align: center; /* 讓子元素 .try-it-btn 置中 */ } /* 覆蓋父層的 text-align,讓文字內容左對齊 */ section .hero-intro h1 { font-size: 60px; text-align: left; margin-bottom: 0px; } section .hero-intro h2 { font-size: 30px; text-align: left; margin-top: 0px; margin-bottom: 0px; } section .hero-intro p { font-size: 20px; text-align: left; margin-top: 0px; margin-bottom: 20px; } 核心概念display: inline-block 的作用讓容器寬度縮到內容大小(不會占滿父容器 100% 寬)這樣父容器的 text-align: center 才能讓它置中text-align 的繼承與覆蓋.hero-intro { text-align: center; } ↓ 讓 .try-it-btn 這個「元素本身」水平置中 ↓ 但 .try-it-btn 內的 text-align: left 讓「文字內容」左對齊 分層理解:.hero-intro 的 text-align: center 影響直接子元素的橫向位置(讓 .try-it-btn 置中).hero-intro h1/h2/p 用自己的 text-align: left 覆蓋,讓文字內容左對齊.try-it-btn 內的 text-align: left 讓按鈕和下方文字自然對齊左邊緣核心技術 3: Linear Gradient 硬切換問題情境需要製作一個橘色按鈕,但不是純色或漸層,而是上下兩個橘色色塊直接分界的效果,中間沒有平滑過渡。解決方案section.hero .try-it-btn h2 { display: block; padding: 20px 30px; background: linear-gradient(to bottom, #ffb84d 50%, #ff9500 50%); color: white; font-weight: bold; border-radius: 5px; } 一般漸層 vs. 硬切換/* ❌ 平滑漸層:顏色會逐漸過渡 */ background: linear-gradient(to bottom, #ffb84d, #ff9500); /* ✅ 硬切換:兩個色塊直接分界 */ background: linear-gradient(to bottom, #ffb84d 50%, #ff9500 50%); 視覺對比:平滑漸層: 硬切換: ┌──────────┐ ┌──────────┐ │ 淺橘 │ │ 淺橘 │ │ ↕ │ │ │ │ 漸層 │ ├──────────┤ ← 直接切換 │ ↕ │ │ 深橘 │ │ 深橘 │ │ │ └──────────┘ └──────────┘ 為什麼加百分比可以做出硬切換?background: linear-gradient(to bottom, #ffb84d 50%, #ff9500 50%); ^^^^^^^^ ^^ ^^^^^^^^ ^^ 顏色1 位置 顏色2 位置 運作原理: stackoverflow#ffb84d 50%: 淺橘色從 0% 延伸到 50%#ff9500 50%: 深橘色從 50% 開始到 100%兩個顏色在 50% 的位置重疊,就形成了直接切換而不是漸層調整分界線位置/* 上面佔 40%,下面佔 60% */ background: linear-gradient(to bottom, #ffb84d 40%, #ff9500 40%); /* 上面佔 70%,下面佔 30% */ background: linear-gradient(to bottom, #ffb84d 70%, #ff9500 70%); 實務技巧:兩個百分比設定在同一個位置就會產生硬切換效果。 stackoverflow延伸應用:多色硬切換/* 三等分,三種顏色 */ background: linear-gradient( to right, red 33.33%, blue 33.33%, blue 66.66%, green 66.66% ); 產生效果:核心技術 4: CSS Multi-column Layout問題情境將 <article> 內的多個 <p> 段落排版成雙欄,類似報紙排版效果。解決方案article { column-count: 2; /* 指定欄數 */ column-gap: 20px; /* 欄位間距 */ margin-bottom: 200px; } article h2 { column-span: all; /* h2 跨越所有欄位,不參與分欄 */ margin-bottom: 40px; } article p { break-inside: avoid; /* 避免段落在換欄時被切斷 */ margin-top: 0; /* 統一移除上方間距,避免兩欄不對齊 */ line-height: 1.2; } 為什麼選擇 column-count?CSS Multi-column Layout 的三大優勢: developer.mozilla內容自動流動: 左欄滿了自動流到右欄,不需要手動分組不改動 HTML: 維持語義化的單一 <article> 結構適合流動式內容: 比 Grid 或 Flexbox 更適合「文字排版」場景遇到的問題與解決問題 1: 第二欄高度跟 h2 一樣高錯誤結果: ┌──────────┬──────────┐ │ │ │ │ h2 │ 第二欄 │ ← h2 只佔一欄寬度 │ │ 很短 │ │ 第一欄 │ │ └──────────┴──────────┘ 原因: <h2> 也被分欄了,只佔一欄寬度。 解決: 用 column-span: all 讓 <h2> 跨越所有欄位。 developer.mozillaarticle h2 { column-span: all; /* h2 現在橫跨兩欄 */ } 正確結果: ┌──────────────────────┐ │ h2 │ ← 跨越所有欄位 ├──────────┬──────────┤ │ 第一欄 │ 第二欄 │ └──────────┴──────────┘ 問題 2: 第一欄開頭 <p> 有 margin-top,第二欄沒有錯誤結果: ┌──────────┬──────────┐ │ │ │ │ ↓ margin │ 段落 3 │ ← 第二欄頂部緊貼 │ 段落 1 │ 段落 4 │ └──────────┴──────────┘ 原因: Multi-column 會折疊新欄頂部元素的 margin-top(類似新容器開始)。 developer.mozilla 解決: 統一設定 article p { margin-top: 0; } 讓兩欄對齊。article p { margin-top: 0; /* 統一移除,避免不對齊 */ } 正確結果: ┌──────────┬──────────┐ │ 段落 1 │ 段落 3 │ ← 兩欄頂部對齊 │ 段落 2 │ 段落 4 │ └──────────┴──────────┘ 重要屬性說明column-count vs column-width屬性用途適用場景column-count: 2固定欄數✅ 希望永遠顯示 2 欄column-width: 300px固定欄寬響應式設計,欄數自動調整developer.mozillabreak-inside: avoidarticle p { break-inside: avoid; /* 段落不會被切成上下兩半 */ } 避免這種情況:學到的概念CSS Multi-column Layout: 適合報紙、雜誌式的流動排版 mdn2.netlifyMargin Collapsing: 在 multi-column 環境下,新欄頂部的 margin 會被折疊column-span: 控制元素是否跨越所有欄位break-inside: avoid: 避免內容(如段落)在分欄時被切斷完整代碼HTML 結構<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>ZERO TYPE</title> </head> <body> <header> <div class="logo"> <img src="./public/logo.png" alt="網站 logo" /> <p>ZERO TYPE</p> </div> <nav> <ul> <li><span>Home</span></li> <li>Feature</li> <li>News</li> <li>About</li> <li>Contact</li> </ul> </nav> </header> <main> <section class="hero"> <div class="hero-intro"> <h1>IDEAS?</h1> <h2>This is just a placeholder.</h2> <p> You can remove any link to our website from this website template, you're free to use this website template without linking back to us. </p> <div class="try-it-btn"> <h2>TRY IT NOW!</h2> <p>Don't worry it's for free.</p> </div> </div> <div class="hero-img"> <img src="./public/box.png" alt="網站主視覺圖片，一個裝滿各種不同類型檔案圖示的箱子" /> </div> </section> <article> <h2>This is just a placeholder.</h2> <p>You can remove any link to our website...</p> <p>This is just a place holder...</p> <!-- 更多段落 --> </article> </main> <footer> <div class="copyright">&copy; 2023 Zerotype. All Rights Reserved.</div> <div class="social-media-link"> <ul> <li><a href="##"><img src="./public/facebook.png" alt="" /></a></li> <!-- 更多社交媒體連結 --> </ul> </div> </footer> </body> </html> CSS 樣式(關鍵部分)/* Header 垂直置中 */ header { position: relative; border: 5px solid black; margin-bottom: 30px; background-color: #f2f2f2; } header nav { position: absolute; top: 50%; left: 300px; transform: translateY(-50%); } /* Hero 區塊按鈕置中 */ section.hero .hero-intro { display: inline-block; width: 45%; vertical-align: top; text-align: center; } section.hero .try-it-btn { text-align: left; display: inline-block; margin-top: 0px; } section.hero .try-it-btn h2 { background: linear-gradient(to bottom, #ffb84d 50%, #ff9500 50%); padding: 20px 30px; color: white; border-radius: 5px; } /* 雙欄文章排版 */ article { column-count: 2; column-gap: 20px; margin-bottom: 200px; } article h2 { column-span: all; margin-bottom: 40px; } article p { margin-top: 0px; break-inside: avoid; line-height: 1.2; } 學習重點總結技術層面Position Absolute + Transform: 不用 Flex/Grid 實現精準垂直置中 geeksforgeeksInline-block + Text-align: 傳統的元素置中組合技巧Linear Gradient 硬切換: 用相同位置的色標製作雙色分界 developer.mozillaMulti-column Layout: 流動式雙欄排版的最佳選擇 developer.mozilla設計思維語義化 HTML: 保持結構清晰,不為排版犧牲語義漸進式除錯: 從視覺問題追蹤到 CSS 屬性,逐步解決屬性語義選擇: 定位用 left/top,留白用 margin,各司其職延伸學習資源MDN: transform developer.mozillaMDN: CSS Multi-column Layout developer.mozillaMDN: linear-gradient() developer.mozillaHow to Center an Absolute Positioned Element freecodecamp筆記時間: 2026-02-09 核心學習: Position Absolute 垂直置中、Linear Gradient 硬切換、Multi-column Layout 學習階段: Phase 2 - CSS 切版實作

## Publication Information

- [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/): Publication homepage
- [All Posts](https://paragraph.com/@gcake/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gcake): Subscribe to updates