Bootstrap 4 版面區塊內容水平居中
單個或多個並排區塊寬度總和未滿一列12個單位寬時，就需要設定安排區塊水平居中的狀態，【.text-center】是讓區塊內的圖文內容水平居中於區塊內，而區塊的水平居中安排分為單個與多個並排二種狀態，設定與安排也有所不同。
1.單個區塊水平居中-使用【.mx-auto】
在Bootstrap 4之中，單個區塊水平居中只要在該<div>加上類別【.mx-auto】即可。
2.多個水平並排區塊居中-使用【.offset-X】
多個水平區塊並排居中，傳統是以offset類別來安排，安排上區塊寬度變化比較有限制，因為需要左側縮排與右側空下的空間一致，因此區塊並排變化也較少。
如範例中，二個區塊寬度均為col-sm-5，共使用了10個單位寬，只要針對左側的<div>加上1個單位的縮排(offset-sm-1)，右側自動剩下一個單位寬，即可達成水平居中的目的，需注意整列總寬度(含右側控下來的寬度)同樣需符合12個單位寬(區塊可任意安排單個或多個，寬度值也可自行不同搭配，唯左側縮排量與右側空下的寬度要相同)，且區塊寬度單位需一致(此範例使用sm，也可以他配其他寬度單位)。
3.多個水平並排區塊居中-使用【.justify-content-center】
justify-content-center是bootstrap 4之後才提供的新方式，大大提升編排上的方便性，就無offset的限制問題，同一列並排的區塊無論多少個，只要並排區塊寬度總和<12個單位均可。
如範例中，二個區塊寬度均為col-sm-5，共使用了10個單位寬(可單個或多個區塊並排，只要並排區塊寬度總和<12個單位)，請在套用row的<div>再加入【.justify-content-center】即可達成水平居中的目的 (此範例使用sm，也可以他配其他寬度單位)。
範例完成檔下載
有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作:
【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】
相關課程 : 優勢多媒體 - RWD響應式網頁設計
有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作:
【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】
相關課程 : 優勢多媒體 - RWD響應式網頁設計
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
嗨，朋友們！繼先前分享六款淺色背景的簡報，每個簡報都包含了為二、三、四、六區的文字版面分配。本篇要接續和大家分享另外六款的深色背景簡報，同樣內含二、三、四、六區的文字版面分配，可以讓你有更多的新發現。讓我們看下去！
嗨！朋友們！在簡報中，文字版面扮演著舉足輕重的角色。它不僅傳達信息，也是視覺設計的一環。正確的文字版面分配可以使簡報內容更清晰、易讀，也提升了整體視覺美感。因此，本篇文章將和你分享如何巧妙運用二、三、四、六區的文字版面分配，讓你在簡報製作的過程中得心應手。
在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。
這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。
為甚麼寫這邊文章?
這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。
我的公轉365 @ 冬｜小雪｜2022
認識我的人，大多知道這幾年我很愛做手帳，對我來說，除了解決難以斷捨離的懷舊毛病，其實，最重要的是，「做版面」我樂在其中！
以前剛進出版界的時候，美術編輯還是手工完稿的年代。雖然，我在出版公司是文字編輯，但是，我編輯的啟蒙，其實是大學玩了很多美術編輯......
抱歉，由於把夢境的紀錄都先收入專題裡面，這樣就不會覺得很複雜的主頁，然後以後又能在專題區好好的檢視自己的夢和解析，所以昨天調動的有點大，讓大家可能很混亂~!~~~抱歉
本篇適合：
> 剛開始學習 HTML / CSS ，對基本語法有了解的人
> 想要快速建立一個一頁式網站，但對 CSS 仍無法很活用的人
初始設定與 Bootstrap 中文版網頁使用
在過去在大學期間擔任助教的過程，常常有人問「Bootstrap」是什麼？一來我也不是什麼前端工程師，我一時也不太知
亞諾烘培坊相關資訊::
地址:
基隆市仁愛區新店里孝一路62號騎樓下
營業時間:
不定時
內行人才會買攤位
與其說是烘培坊反倒不如說是標準路邊攤，幾個幾排架子就能做起生意來。相對於有正是店面來說，反倒是省下了許多無形水電、店面房租、稅額成本。這或許就是地下經濟能夠生存之道。
檢視較大的地圖
Bootstrap是一個最常用的一個CSS Framework。今天，你將會學習使用Bootstrap，Step By Step，從零開始，去編寫一個網站的外觀。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
嗨，朋友們！繼先前分享六款淺色背景的簡報，每個簡報都包含了為二、三、四、六區的文字版面分配。本篇要接續和大家分享另外六款的深色背景簡報，同樣內含二、三、四、六區的文字版面分配，可以讓你有更多的新發現。讓我們看下去！
嗨！朋友們！在簡報中，文字版面扮演著舉足輕重的角色。它不僅傳達信息，也是視覺設計的一環。正確的文字版面分配可以使簡報內容更清晰、易讀，也提升了整體視覺美感。因此，本篇文章將和你分享如何巧妙運用二、三、四、六區的文字版面分配，讓你在簡報製作的過程中得心應手。
在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。
這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。
為甚麼寫這邊文章?
這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。
我的公轉365 @ 冬｜小雪｜2022
認識我的人，大多知道這幾年我很愛做手帳，對我來說，除了解決難以斷捨離的懷舊毛病，其實，最重要的是，「做版面」我樂在其中！
以前剛進出版界的時候，美術編輯還是手工完稿的年代。雖然，我在出版公司是文字編輯，但是，我編輯的啟蒙，其實是大學玩了很多美術編輯......
抱歉，由於把夢境的紀錄都先收入專題裡面，這樣就不會覺得很複雜的主頁，然後以後又能在專題區好好的檢視自己的夢和解析，所以昨天調動的有點大，讓大家可能很混亂~!~~~抱歉
本篇適合：
> 剛開始學習 HTML / CSS ，對基本語法有了解的人
> 想要快速建立一個一頁式網站，但對 CSS 仍無法很活用的人
初始設定與 Bootstrap 中文版網頁使用
在過去在大學期間擔任助教的過程，常常有人問「Bootstrap」是什麼？一來我也不是什麼前端工程師，我一時也不太知
亞諾烘培坊相關資訊::
地址:
基隆市仁愛區新店里孝一路62號騎樓下
營業時間:
不定時
內行人才會買攤位
與其說是烘培坊反倒不如說是標準路邊攤，幾個幾排架子就能做起生意來。相對於有正是店面來說，反倒是省下了許多無形水電、店面房租、稅額成本。這或許就是地下經濟能夠生存之道。
檢視較大的地圖
Bootstrap是一個最常用的一個CSS Framework。今天，你將會學習使用Bootstrap，Step By Step，從零開始，去編寫一個網站的外觀。