国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

垂直居中的幾種實現方法？

sorra / 2463人閱讀

摘要：結構效果如下優點不用受內容高度的限制，簡單實現垂直居中缺點不兼容方法二這個方法使用絕對定位的，把它的設置為，設置為負的高度。這意味著對象必須在中指定固定的高度。使用使塊級元素垂直居中是很簡單的。

方法一：把一些 div 的顯示方式設置為表格，因此我們可以使用表格的 vertical-align屬性。
結構效果如下：
http://jsfiddle.net/chic/4uduzb3t/1/
優點：不用受內容高度的限制，簡單實現垂直居中；
缺點：不兼容ie6,7

方法二：這個方法使用絕對定位的 div，把它的 top 設置為 50％，margin-top 設置為負的 content 高度。這意味著對象必須在 CSS 中指定固定的高度。
結構效果如下：
http://jsfiddle.net/chic/4uduzb3t/2/

優點：兼容性好
缺點：必須知道內容盒子的高度才可以，有了這點限制；

方法三：這個方法和方法二的原理是一樣的。廢話不多說看代碼
http://jsfiddle.net/chic/4uduzb3t/4/

優缺點和法二一樣，缺點嘛多了個額外的標簽；

方法四：這個方法使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設置為 top:0; bottom:0;。但是因為它有固定高度，其實并不能和上下都間距為 0，因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。
結構效果如下：
http://jsfiddle.net/chic/4uduzb3t/3/

優點：非常簡單
缺點：不兼容ie6,7

方法五：這個方法只能將單行文本置中。只需要簡單地把 line-height 設置為那個對象的 height 值就可以使文本居中了。這個就不用實例了，您你看就明白；

方法六：這個方法的原理是利用元素的vertical-align,區別于方法一的是不限制在table元素中（用于圖片的居中不錯）；
結構效果如下：
https://jsfiddle.net/chic/mkd9ufmk/10/

優點：不用受內容高度的限制，兼容性好；
缺點：垂直居中的對象只限在行內元素范圍

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110918.html

相關文章

  • 純CSS實現垂直居中的幾種方法

    摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方...

    FullStackDeveloper 評論0 收藏0

  • 純CSS實現垂直居中的幾種方法

    摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方...

    sourcenode 評論0 收藏0

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

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

    joyqi 評論0 收藏0

  • 面試常見問題——垂直居中的幾種方法

    摘要：前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下，來自這里做手機的頁面，經常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。 （前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下 ，來自這里） 做手機的頁面，經常會遇到需要垂直居中的情況，這里把常用的 垂直居中的幾種方法 整理下。 結構 我是垂直居中元素 方法1：dispaly:table-cel...

    Prasanta 評論0 收藏0

  • html的幾種水平垂直居中的方式（基礎）

    摘要：前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。 前言 我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。 第一種方法 d第一種 .Centered1{ background-color: #800...

    Songlcy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<