android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中
點擊上面“藍字”關注我們
你是否和小編一樣在編輯一個版面時,通常用到水平居中和垂直居中,而水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就能輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題,都是“垂直居中”這個討人厭的設定,以下將介紹五種單純利用CSS垂直居中的方法。
方法1:設定行高(line-height)設定行高是垂直居中最簡單的方式,適用于“單行”的“行內元素”(inline、inline-block),例如單行的標題,或是已經設為inline-block屬性的div,若將line-height設成和高度一樣的數值,則內容的行內元素就會被垂直居中,不過由此就可以看出,為什么必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。示例:
代碼
效果
方法2:絕對定位
絕對定位就是CSS里的position:absolute,絕對定位使元素的位置與文檔流無關,因此不占據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對于它在普通流中的位置。不過要特別注意的是,設定絕對定位的子元素,其父元素的position必須要指定為relative喔!而且絕對定位的元素是會互相覆蓋的,所以如果內容元素較多,可能就會有些問題。示例:
代碼
效果
方法3:利用transform
transform是CSS3的新屬性,主要掌管元素的變形、旋轉和位移,利用transform里的translateY改變垂直的位移,搭配元素本身的top屬性,就可以做出垂直居中的效果,比較需要注意的地方是,子元素必須要加上position:relative,不然就會沒有效果的哦。示例:
代碼
效果
方法4:使用表格或假裝表格
我們發現在表格這個HTML里面常用的DOM里,要實現垂直居中是相當容易的,只需要下一行vertical-align:middle就可以,為什么呢?最主要的原因就在于table的display是table,而td的display是table-cell,所以我們除了直接使用表格之外,也可以將要垂直居中元素的父元素的display改為table-cell,就可以輕松達成,不過修改display有時候也會造成其他樣式屬性的連動影響,需要比較小心使用。示例:
代碼
效果
方法5:使用Flexbox
使用align-items或align-content的屬性,輕輕松松就可以做到垂直居中的效果。示例:
代碼
效果
以上就是一些垂直居中的方法,由于垂直居中往往會動用一些屬性,后續反而要多寫其他的定位來修正,那就有點本末倒置了,因此如何靈活應用CSS中的垂直居中的方法,就要靠大家根據自己的版面結構靈活運用了!小編偷偷告訴你關注我們,更多的干貨與您分享!
不會配色怎么辦!今天教你從零開始學配色
關于響應式布局,你了解多少
圖片太大怎么?趕快來優化!
SEO優化排名,你的網站具有這些特征嗎
我們一起來學習下網頁中特殊字體的引用
掃碼關注我們
獲得更多
精彩資訊
總結
以上是生活随笔為你收集整理的android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: go build 参数_从0开始Go语言
- 下一篇: html表格边框设置波浪线,SVG CS