H5元素的水平垂直居中布局總結

2021-09-25 15:54:33 字數 1876 閱讀 8366

1，塊級元素設定height和line-height或者text-align: center，可以讓塊級元素包裹的內聯元素或者自身文字內容垂直居中或者水平居中；但是對包裹的塊級元素和浮動元素不起作用。

2，塊級元素包裹塊級元素，設定被包裹元素margin: 0 auto達到水平居中，但是設定父元素的height和line-height或者子元素的vertical-align: middle不起作用，因為vertical-align: middle只對行內元素有效。總結設定子元素垂直居中有以下幾種方法：

2.1，設定塊級子元素display: inline-block

.btn-container 


.btn-content
注意一定要設定父元素font-size: 0px。這是因為vertical-align: middle預設是和父元素的基線居中對齊，父元素的基線可以假想為字母x的底邊，只有設定父元素font-size: 0px，才能將父元素的基線調整到中間，達到子元素在父元素中垂直居中的目的。

設定之前：

設定之後：

2.2，父塊級元素包裹兩個屬性值為display: inline-block的子元素，並且有乙個子元素的高度為100%，並且兩個子元素都設定vertical-align: middle，達到另乙個子元素垂直居中：

客戶端


.btn-container 


.btn-text 


.btn-content
渲染結果如下圖所示：

注：該情況也適用於子元素為一張加乙個塊級元素的情況

2.3，設定父元素的padding-top為(父元素高度-子元素高度)/2

.btn-container 


.btn-content
那是否可以設定子元素的margin-top來達到同樣的效果呢，也可以，但是有風險。根據規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。說白點就是，父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding，就會不斷一層一層向上找，把自己的margin當父元素的margin執行。

2.4，設定子元素為絕對定位，有以下3種方法可以實現水平和垂直居中：

.btn-container 


//第一種方法


.btn-content 


//第二種方法


.btn-content 


//第三種方法


.btn-content
第二種方法必須知道子元素寬度和高度；如果不設定子元素尺寸，第一種方法子元素尺寸會和父元素一致，第三種方法會和子元素中包裹的內容一致；

2.5，使用flex彈性布局，彈性容器的每個子元素都變成乙個彈性元素，而且是以相同方式布局的。不管是段落還是span元素，都變成彈性元素。

以2.2節為例:

.btn-container 


.btn-text 


.btn-content
可以看到彈性布局簡單很多，所以h5布局中能用彈性布局的地方我們都應該盡量用彈性布局，在介面適配方面彈性布局也有一定的優勢。

span 居中 H5元素的水平垂直居中布局總結

1，塊級元素設定height和line height或者text align center，可以讓塊級元素包裹的內聯元素或者自身文字內容垂直居中或者水平居中 但是對包裹的塊級元素和浮動元素不起作用。2，塊級元素包裹塊級元素，設定被包裹元素margin 0 auto達到水平居中，但是設定父元素的hei...

H5學習之路 二 元素

html中的元素很多，先總結下以前的，後面會詳細的記錄新元素的使用 一 以往的元素 不完全統計html中總共有119個元素，在這記錄下常用的元素是做什麼的，複雜點的會寫個例子 定義html文件，定義文件的開始和結束 定義關於文件的資訊 定義文件的標題 定義關於html文件的原資訊，例如網頁的關鍵字，...

元素水平居中和垂直居中常用的方法總結

1.1使用單元格的方法，將父元素設為display table cell,通過設定text align center實現元素的水平居中，設定vertical align middle實現子元素的垂直居中 對於子元素，則需要設定display inline block，這就可以將它轉為內聯塊元素了.1...