HTML中display屬性的屬性值有哪些？ display屬性是怎麼實現水平垂直居中的？

HTML中display屬性的屬性值有哪些？都有什麼意義？還有HTML中display屬性是怎麼實現水平垂直居中的？今天這篇文章要跟大家介紹HTML中display屬性的值，還有HTML中display屬性的值是怎麼實現水平垂直居中的，介紹了兩種方法。

display在這裡我說四個最常用的屬性值inline、 block、inlin-block、none。

首先我們先來看看inline（n內嵌元素）：

該屬性值為預設值。此元素會被顯示為內聯元素，元素前後沒有換行符號。一般不會設定這個屬性值。個人理解，其實跟正常的行內元素沒什麼差別，用的比較多的還是block和inline-block。

接著是blo​​ck（區塊級元素）這個屬性值：

這個屬性值是比較有意思的，設定為區塊級元素獨佔一行，就換行來說和p標籤的效果一樣，但是這個屬性值設定後，作為一個區塊級元素他就具備了寬、高，和別的區塊級元素的間距margin著屬性的設置，還有間距的設定padding，但是不能設定行高（line-height）。

還有inline-block（內聯區塊）這個屬性值：

這個屬性值是比較強大的，本人剛開始學的時候基本上見到需要設定的只要不是換行的就會設定這個屬性值，一來他可以作為區塊級元素，可以具有block的特性，另一方面，由於本人初學，對於居中的設定比較麻煩，所有使用這個屬性值可以設定行高，從而使文字居中，方便易用。

對於這個導覽列的實作這幾個屬性很好用，主要用到block和inline-block這兩個屬性值，inline-block作為同一行的幾個元素的實現，block做為元素間換行的實作。大家可以試試。

對於最後一個none這個屬性值：

個人覺得用來隱藏元素比較方便，做那種滑鼠浮動的時候會改變display的屬性值來達到顯示與隱藏元素的效果。

HTML中display一共有哪些比較常用的值呢，讓我們一起來看看

HTML中display在通常的專案開發中比較容易被使用的數值主要有：

• none（元素不會被顯示）;

• #block（元素將顯示為區塊級元素，元素前後會帶有換行符）;

• inline（元素會被顯示為內聯元素，元素前後沒有換行符）;

• inline- block（行內區塊元素。CSS2.1 新增的值）;

• table（元素會作為區塊級表格來顯示，類似f5d188ed2c074f8b944552db028f98a1，表格前後都有換行符）;

• table-row（元素會作為一個表格行顯示，類似a34de1251f0d9fe1e645927f19a896e8）;

• table-cell（元素會作為一個表格單元格顯示，類似b6c5a531a458a2e790c1fd6421739d1c 和b4d429308760b6c2d20d6300079ed38e）。

• display實現的水平垂直置中！

利用position和margin進行元素水平垂直居中；想必大家還是比較熟悉，常用的。但不知道你是否使用過display：table與table-cell對元素進行水平垂直居中呢？

以下就是利用display：table-cell進行元素水平垂直居中的兩種方法了：

1.利用display：table與table-cell進行元素水平垂直居中

結構：

<div class="wrap">
 <div class="box">
  <div class="con">梦幻雪冰</div>
 </div>
</div>

樣式：

.wrap {
    /*让元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*让元素以表格的单元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直对齐*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

優點：

這種方法不會像前面的兩種方法一樣，有高度的限制，此方法可以要據元素內容動態的改變高度，從而也就沒有空間的限制，元素的內容不會因為沒足夠的空間而被切斷或者出現難看的滾動條。

缺點：

不足之處呢？這種方法只適合現代瀏覽器，在IE6-7下無法正常運作。

2.利用display：table-cell進行元素水平垂直居中

#結構：

<div class="wrap">
 <div class="box">
  梦幻雪冰
 </div>
</div>

樣式：

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

優點：

這種方法的優點和方法三是一樣的，不會有高度的限制。

缺點：

IE6、IE7不支援

【相關推薦】

HTML5中web是什麼？ web儲存中的元素有哪些？

HTML IMG標籤的屬性是有哪些？了解IMG標籤的用法

#

以上是HTML中display屬性的屬性值有哪些？ display屬性是怎麼實現水平垂直居中的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！