oundation 默認設置
Foundation 使用瀏覽器默認字體大小 (font-size:100%
)。對于大多數桌面設備的瀏覽器來說,字體大小默認為 16px。對于移動設備的瀏覽器,字體默認大小為 12px。 默認的字體為 "Helvetica Neue"
, line-height 默認為 1.5
。
這些設置是適用于 <body>
元素內的元素。
此外, <p>
元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。
文本
以下的 HTML 元素,Foundation 設置了獨立的樣式渲染它,不會采用瀏覽器默認樣式。點擊 "嘗試一下" 查看在線實例。
元素 | 描述 | 在線實例 |
---|---|---|
<h1> - <h6> | h1 - h6 標題 | 嘗試一下 |
直居中
通用布局方式(內斂元素和塊狀元素都適用)
利用flex:
核心代碼:
.container{ display:flex; flex-direction:column; justify:center }
利用transformX(-50%):
核心代碼:
.container{ width: 300px; height: 300px; background: red; position:relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
內斂元素的垂直居中
單行內斂元素:設置內斂元素的高度和行高相等
核心代碼:
.container { height: 120px; line-height: 120px; }
塊狀元素
固定元素高度的塊狀元素
核心代碼
.container{ position: relative; } .child{ position: absolute; top: 50%; height: 100px; margin-top: -50px; }
未知高度的塊狀元素
當垂直居中的元素的高度和寬度未知時,我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在兼容性的問題。
核心代碼:
.container { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
水平居中
通用布局方式
flex布局
核心代碼:
.container{ display: flex; justify-content: center; } absoulte+transform
核心代碼:
.container{ position:relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); }
內斂元素水平居中
text-align:center
核心代碼:
.container{ text-align:center }
塊狀元素水平居中
使用 margin:0 auto 必須注明子元素和父元素的寬度
核心代碼:
.container{ margin:0 auto }
多塊狀元素:
利用內斂元素布局方式container屬性為text-align:center;
核心代碼:
.container{ text-align: center; } .child{ display: inline-block; }
水平垂直居中
固定寬高元素水平垂直居中
通過margin平移元素整體寬度的一半,使元素水平垂直居中。
核心代碼:
.container { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
未知寬高元素水平垂直居中
利用2D變換,在水平和垂直兩個方向都向反向平移寬高的一半,從而使元素水平垂直居中。
核心代碼:
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
利用flex布局
利用flex布局,其中justify-content 用于設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式;而align-items屬性定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。
核心代碼:
.container { display: flex; justify-content: center; align-items: center; }
相對于 body 的水平垂直居中
列表布局(兼容性好)
核心代碼:
.outer { display: table; position: absolute; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; } .inner { margin-left: auto; margin-right: auto; width: 400px; }
position 布局
核心代碼
.container{ position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; }
我是一名前端開發程序員,自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理,送給每一位前端小伙伴,這里是小白聚集地,歡迎初學和進階中的小伙伴
前端資料獲取方式:
1.在你手機的右上角有【關注】選項,點擊關注!
2.關注后,手機客戶端點擊我的主頁面,右上角有私信,請私信回復:【學習】
電腦已經設置好了關鍵詞自動回復,所以回復的時候請注意關鍵詞喲~
篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果,這也是我們網頁在編碼制作中會經常用到的問題。
主要實現css代碼:
水平居中:text-align:center;
垂直居中:line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個例子,加入我們這里有一個div,寬度和高度為300px,背景顏色為黑色,然后在div中有一行簡短文字,我們只需要使用line-height:200px;就可以實現文字的居中效果,具體的代碼如下所示:
由上圖可以看出我們實現了單行文字的垂直居中效果,但是很多時候我們的文字并不知道具體有多少,可能有一行,也可能有很多行,那么遇到多行文字的這種問題我們要如何處理呢。
對于多行文本的垂直居中我們有很多種實現方式,我們這里逐個的來看一下;
1、使用display:table來實現
主要實現代碼:
display: table使塊狀元素成為一個塊級表格;
display: table-cell;子元素設置成表格單元格;
vertical-align: middle;使表格內容居中顯示,即可實現垂直居中的效果;
具體的html與css的代碼就如下所示:
2、使用absolute與transform配合實現
主要實現代碼:
position:absolute; 首先給文本絕對定位;
left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%,再用transform向左(上)平移它自己寬度(高度)的50%,也就達到居中效果了。
具體的html與css的代碼就如下所示:
3、使用flex實現
主要實現代碼:
display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器
align-items: center;定義項目在交叉軸(縱軸)上如何對齊,垂直對齊居中
justify-content: center; 定義了項目在主軸上的對齊方式,水平對齊居中
具體的html與css的代碼就如下所示:
好了,本篇文章就給大家說到這里,大家自己動手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習一下,有需要源碼的可以直接私信【網站源碼】即可。
每日金句:了解別人心里想什么,你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。