inline-block 實現元素垂直置中

標籤：

---恢複內容開始---

1.元素的顯示方式：

1 　　 display:inline;3     display:linline-block; 5 　　 display:block

   display:inline 表示，元素做為內嵌元素顯示，兩個或者多個內嵌元素可以並列成一行顯示；常見的內嵌元素如：span strong 標籤；內嵌元素的特點是：不能給元素設定寬和高；

   display:block 表示，元素作為區塊層級元素顯示，兩個或者多個區塊層級元素分成多行顯示；常見的區塊層級元素如：div, h1~h5 標籤；區塊層級元素的特點是：可以給元素設定寬高，分行顯示；

   display:inline-block,元素作為內嵌元素顯示，在父級元素寬度足夠的情況下，兩個或者多個inline-block 元素並列成一行顯示；inline-block 的元素可以設定寬高；

 

2. 對於vertical-align：

　　支援程度：所有瀏覽器都支援 vertical-align 屬性（包括 IE8）

     作用：該屬性定義行內元素的基準相對於該元素所在行（父級元素）的基準的垂直對齊。

　　可能的取值方式:

　　baseline： 元素的基準放置在父級元素的基準上；（vertical-align 屬性的預設值是 baseline）；

      text-top/text-bottom：把元素的底端垂直與父元素的文本的頂端/底端對齊；

      top：把元素的頂端與行中最低的元素的頂端對齊。

      bottom：把元素的頂端與行中最低的元素的頂端對齊。【注意，top/bottom 對應的邊界是 父級元素的border 的內邊界】

      middle：把元素相對於父級元素垂直置中；

   所以為了使得元素相對於父級元素垂直置中，我們可以把元素的 display 屬性設定為 inline-block;同時把元素的 vertical-align 屬性值設定為 middle;

 3. 如何將一個元素相對於父級元素置中:    

<div class="father"><div class="son"></div></div>

可以採取樣式：

 

     

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     

---恢複內容結束---

inline-block 實現元素垂直置中