布局總結-水平居中布局的實現

starsfun 發布于2019-08-30 15:53 / 2448人閱讀

摘要：布局一左右布局實現左右布局居中布局的幾個實現方案標簽結構很簡單，就是一個父元素里面套了一個子元素想要實現左右布局，只需要把設置成向左浮動，右邊向右浮動或者把和設置成二居中布局結構居中布局的幾個實現方案標簽結構很簡單，就是一個父元素

CSS布局 一、左右布局 1、float實現左右布局

                    
                    
                    
                        
                        
                        居中布局的幾個實現方案
                    
                    
                        
                        DEMO

標簽結構很簡單，就是一個父元素里面套了一個子元素

想要實現左右布局，只需要把

設置成向左浮動，右邊向右浮動

.left{
    float: left;
}
.right{
    float: right;
}

或者把left和right設置成inline-block

.left{
    display: inline-block
}
.right{
    display: inline-block
}

二、居中布局 1、html結構

                    
                    
                    
                        
                        
                        居中布局的幾個實現方案
                    
                    
                        
                            DEMO

標簽結構很簡單，就是一個父元素里面套了一個子元素

2.用text-align和inline-block實現

首先text-align只針對inline元素有效，因此，可以在父元素設置text-align:center,然后改變子元素display:block為inline-block.

index01.css的代碼為：

                    .parent{
                        height: 200px;
                        background-color: gray;
                    
                        text-align: center;
                    }
                    .child{
                        background-color: yellowgreen;
                        height: 200px;
                        width: 200px;
                    
                        display: inline-block;
                    }

3.用display:table和margin:0 auto實現

首先定寬的塊級元素可以設置margin:0 auto實現水平居中

display:table這個元素的作用就像

元素. 它定義了一個塊級盒子.

index02.css的代碼為;

.parent{
    height: 200px;
    background-color: gray;
}

/*display:table
在表現形式上很像是block元素
寬度跟著內容走。
*/
.child{
    display: table;
    margin: 0 auto;
    background-color: greenyellow;
    height: 200px;
    width: 200px;
    text-align: center;
    line-height: 200px;
}

4.用position:absolute和left: 50%以及transform: translateX(-50%)實現

首先對父元素設置position: relative

對子元素設置絕對定位，相對于父元素定位

用left:50%則可以根據左邊進行定位

根據transform，則可以根據自身的寬度偏移

index03.css的代碼為：

    .parent{
        height: 200px;
        background-color: gray;
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 200px;
        background-color: greenyellow;
    }

5.用flex+justify-content實現

對父元素設置display:flex，則第一級子元素是flex-item

對子元素設置justify-content: center;就可以實現居中

/////////

也可以對子元素設置margin:0 auto實現居中

index04.css的代碼為：

    .parent{
        height: 200px;
        background-color: gray;
        display: flex;    
        justify-content: center;
    }
    .child{
        height: 200px;
        background-color: greenyellow;
        /*  margin: 0 auto;  */
    }

三、左中右布局

左中右布局參考一的左右布局，可將三個元素都設置成float:left
或者將三個元素都設置成dispaly：inline-block

四、垂直居中

height和line-height設置垂直居中

display:flex和align-items: center`

行級元素設置vertial-align: middle

GPU云服務器云服務器水平居中布局 android布局的實現布局居中自定義布局怎么實現

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

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

前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
布局總結-水平居中布局的實現

摘要：布局一左右布局實現左右布局居中布局的幾個實現方案標簽結構很簡單，就是一個父元素里面套了一個子元素想要實現左右布局，只需要把設置成向左浮動，右邊向右浮動或者把和設置成二居中布局結構居中布局的幾個實現方案標簽結構很簡單，就是一個父元素 CSS布局一、左右布局 1、float實現左右布局 ...

MadPecker 2019-08-01 17:42 評論0 收藏0
靜態頁面布局總結（新手）

摘要：學習一個月了，對和頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。學習HTML一個月了，對HTML和Css頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面...

MasonEast 2019-08-02 12:11 評論0 收藏0
靜態頁面布局總結（新手）

摘要：學習一個月了，對和頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。學習HTML一個月了，對HTML和Css頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面...

sushi 2019-08-29 17:30 評論0 收藏0