[CSS] 垂直置中的方法 | DIV 區 塊 水平置中
在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於CSS中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。以下是之後示範中HTMLBody的部分: 要置中的內容
在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於CSS中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。以下是之後示範中HTMLBody的部分: 要置中的內容
在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於 CSS 中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。 以下是之後示範中 HTML Body 的部分:
<div class="outer"> <div class="inner"> <p>要置中的內容</p> </div></div>後面則是搭配上不同的 CSS 作為展示。
文字的垂直置中方法[1] flex(推薦)[2]Flex 在瀏覽器的支援度已經相當普及,除非有需要支援 IE 的使用,不然基本上都可以安心使用了,簡單好用:
邏輯:display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
.outer { background-color: #95afba;}.inner { background-color: #d5e1a3; display: flex; height: 300px; align-items: center; } line-height(常用)[3]很好用的方法,就是設定 div 的高度和文字高度一樣,就可以簡單達到垂直置中的效果。
邏輯:當 DIV 區塊的高度等同於文字行高的,文字就會被放在中間。
.outer { background-color: #95afba;}.inner { background-color: #d5e1a3; height: 300px; line-height: 300px; }效果如下:
table(少用)[4]邏輯:把要垂直置中的內容當作是 table 來操作,所以可以用 vertical-align 的指令。
.outer { background-color: #95afba; display: table; height: 300px;}.inner { background-color: #d5e1a3; display: table-...