css的居中布局問題

leoperfect 發布于2019-08-30 15:53 / 1912人閱讀

摘要：在和下不支持屬性，設置方法無法解決瀏覽器兼容問題。對于不支持的和使用特定的。利用技術區別對待和，在不支持的下，通過給父子兩層元素分別設置和來實現居中。

css經常用來處理居中問題，不同的情況使用不同的方法；

一 :水平居中

(1)文本、圖片等行內元素的水平居中

給父元素設置text-align:center,可以實現文本、圖片等行內元素的水平居中



    hello world!

父元素高度不確定的文本、圖片、塊級元素的垂直居中通過給父容器設置相同的上下內邊距來實現。

2 父元素高度確定的單行文本的垂直居中


hello world

父元素高度確定的單行文本的垂直居中，通過給父元素設置line-height來實現的，line-height的值和父元素的高度值相同

3 父元素高度確定的多行文本、圖片、塊級元素的垂直居中

方法一

利用css的一個垂直居中屬性vertical-align，但是只有當父元素為td或th時，這個vertical-align才會生效，對于其他的塊級元素（div、p）默認情況下是不支持該屬性。在Firefox和IE8下，可以設置塊級元素的display:table-cell屬性，激活vertical-align。在IE6和IE7下不支持table-cell屬性，設置table-cell方法無法解決瀏覽器兼容問題?？傊?，直接使用表格減少些操作。缺點是增加了嵌套深度和語義標簽。



    
        hello

        hello

        hello

        hello

方法二

對于支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。對于不支持的IE6和IE7使用特定的hack。利用hack技術區別對待Firefox、IE8、IE7和IE6，在不支持display:table-cell的IE6、IE7下，通過給父子兩層元素分別設置top:50%和top:-50%來實現居中。



    
        
            
            hello world!

            hello world!

            hello world!

內容選自《編寫高質量代碼-web前端開發修煉之道》

GPU云服務器云服務器布局遇到的問題布局居中水平居中布局 html居中css

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

轉載請注明本文地址：http://m.hztianpu.com/yun/116564.html

前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

lijinke666 2019-08-29 11:22 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

hedge_hog 2019-08-20 11:16 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

kun_jian 2019-08-01 15:45 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0