成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

div自適應(yīng)水平垂直居中的方法

MonoLog / 1007人閱讀

摘要：圣杯雙飛翼水平自適應(yīng)居中的基礎(chǔ)上圣杯雙飛翼水平自適應(yīng)居中的基礎(chǔ)上第一步居中的寫在最前面撐滿一整行三個(gè)都向左浮動(dòng)第一步居中的寫在最前面，撐滿一整行。

1.Flexbox布局：

display:flex;
justify-content:center;
align-items:center;
width:100%;

2.Bootstrap柵格布局

一共12格，分成3塊，每塊占4列。居中的內(nèi)容寫在中間的那一塊。

3.圣杯/雙飛翼（水平自適應(yīng)居中的基礎(chǔ)上）

第一步：居中的div寫在最前面，width:100%撐滿一整行。三個(gè)div都向左浮動(dòng)float:left;

Main


Left


Right

第二步：讓三個(gè)div顯示在同一行

div.left { marin-left:100%}
div.right{ marin-left:自身的寬度}

第三步：讓中間的div能夠自適應(yīng)

圣杯布局的做法：

div.main{
    padding-left:左div的寬度；
    padding-right:右div的寬度；
}

雙飛翼布局的做法：

在div.main內(nèi)部再添加一個(gè)div.mc：
然后設(shè)置div.mc的margin值

margin-left:左div的寬度；
margin-right:右div的寬度；

現(xiàn)在，水平居中已經(jīng)實(shí)現(xiàn)了；

第四步：垂直居中


在div.left,div.right,div.main外面再加一個(gè)div.wrap,
然后對div.con設(shè)置 display:table,對div.wrap設(shè)置

display:table-cell;
vertical-align:middle;

4.relative/positive + top/left+tarnsform

父元素：

position:relative

子元素：

position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);

transform: translate(-50%, -50%);意思是向右移動(dòng)自身50%的寬度，向下移動(dòng)自身50%的高度。

為什么有了top:50%;left:50%還要 transform: translate(-50%, -50%);

最初：

加了top:50%;left:50%后：

還需要再往左、往上挪一挪：

5.relative/positive + top/left+left + margin

和方法4一樣，用top和left挪到中間：

這之后用margin-left和margin-right進(jìn)行處理：

先給div.child設(shè)置寬度，然后設(shè)置margin：

6.用top,left,bottom,right

計(jì)算公式：

top + div.child 的 height +bottom = div.parent 的 height

left + div.child 的 width +right = div.parent 的 width

如果子元素是行內(nèi)元素，如

,要注意一開始就要去掉margin和padding

方法4、5、6有的demo，詳見 github

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2174.html

相關(guān)文章

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...

    andot 評論0 收藏0

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...

    JessYanCoding 評論0 收藏0

  • 使一個(gè)div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個(gè)問題思路絕對定位居中原始版這個(gè)是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

    joyqi 評論0 收藏0

  • CSS 常用的定位和布局方法匯總(已添加源碼地址)

    CSS-Layout 旨在打造詳盡的前端布局代碼學(xué)習(xí)庫（自從用了框架開發(fā)，CSS生疏了不少，所以開這個(gè)庫練練手）SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無法跳轉(zhuǎn)，請?jiān)L問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內(nèi)元素：對父元素設(shè)置text-align:center; 定寬塊狀元素: 設(shè)...

    loonggg 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<