inline element 每個element會在同一行，如 <a></a> 、<span></span> 、<input />、<label></label> 、<img/>…等。
inline element有自動適應大小、無法設定width、height、margin-top、margin-bottom特性。
block element 每個element會占用一個區塊(自動換行)，如 <div></div> 、<h1></h1> 、<hr/>、<p></p> …等。
block element有自動換行、會依照父元素寬度填滿、無法設定vertical-align特性。
其中display中有個inline-block屬性，可以讓元素同時擁有inline及block的特性，也就是讓元素不會換行且會自動適應大小，同時可以設定寬高。
今天假如在父元素設定text-align: right，但希望其中一個子元素能夠置中，你會發現，就算在子元素設定了text-align: center，他還是不會置中。
這時你只要將元素修改成display:block，他就正常了
如果你將元素修改成display:inline-block，他又不正常了???
此時你將元素加上寬度，他又可以正常顯示了。這到底是為什麼呢?
聰明的你比較一下，上面幾總方法的差別，就在於寬度這個屬性。
使用text-align時，如果你的空間寬度恰好等於是文字總寬的話，是看不出來效果的，也就是如下圖，將元素設為display:inline-block時，假如沒有設定寬度，依照inline-block特性他會自適應文字大小，所以看不出排版效果。
而父元素又是靠右排列，所以這時他會靠右排列。
只要將寬度慢慢打開你就會發現，此元素內容隨著寬度置中(整體還是依照父元素靠右排列，只是如果將寬度設寬會占滿整個區塊，讓元素內容變成整個置中)。
如果你希望將藍色方塊也依照父元素排列，只要加上display:inline-block就可以了。
