首先要了解什么是塊級元素與行級元素

塊級元素

會占領(lǐng)頁面的一行，其后多個block元素自動換行、 可以設(shè)置width，height，設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置 margin與padding屬性。

ps:常見的塊級元素:div,img,ul,form,p等

行級元素

與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。

ps：em，strong，br,input等

display:inline-block，block，inline元素的區(qū)別

1、display：block將元素顯示為塊級元素，從而可以更好地操控元素的寬高，以及內(nèi)外邊距，每一個塊級元素都是從新的一行開始。

2、display : inline將元素顯示為行內(nèi)元素，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。多個相鄰的行內(nèi)元素排在同一行里，知道頁面一行排列不下，才會換新的一行。

3、display：inline-block看上去值名inline-block是一個混合產(chǎn)物，實際上確是如此，將元素顯示為行內(nèi)塊狀元素，設(shè)置該屬性后，其他的行內(nèi)塊級元素會排列在同一行。比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內(nèi)有不同高度內(nèi)容的元素時，通常要設(shè)置對齊方式如vertical-align: top;來使元素頂部對齊。

需要注意的是：

低版本的ie瀏覽器（ie6ie7）是不支持display:inline-block;所以理論上ie是不識別的，但是在 ie 內(nèi)核下有個部分叫做 hasLayout，只要觸發(fā)了它，這個元素就可以設(shè)置高寬從而使行級元素?fù)碛辛薲isplay:inline-block屬性的表象。

如何讓ul居中顯示在div中

ul{text-align:center;}

ul li{display:inline-block;}