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