CSS3的 fit content實現水平居中

2022-09-21 17:24:12 字數 437 閱讀 6596

當我們讓乙個模程式設計客棧塊水平居中首先程式設計客棧想到的肯定是margin:0 auto;有木有?那麼今天給大家介紹乙個fit-c程式設計客棧ontent屬性,不知道有沒有同學用過,如果用過那麼你可以略過這篇文章,沒用過的同學就繼續了,我也是第一次看到這個屬性,之前不知道這個屬性更不用說使用了,原來這個css屬性是用來水平居中的,fit-content是css3中給width屬性新加的乙個屬性值,它配合margin可以讓我們輕鬆的實現水平居中的效果;一起來看下**吧。

在不設定寬度,並且元素中含用float:left情況下居中,先看一段**:

如此這個導航是不會居中的,當我們通過設定fit-content加上margin來做到居中。

目程式設計客棧前這個屬性只支援chrome和firefox瀏覽器,下面是居中的**:

總結本文標題: css3的 fit-content實現水平居中

本文位址:

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

CSS3 總結(二十) 彈性盒子(CSS3)

2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...

css3新動 css3新增動畫

1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...