inline:

此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。因此：無法設(shè)置寬度和高度～

inline-block:

行內(nèi)塊元素。元素前后沒有換行符（CSS2.1 新增的值）

用通俗的話講，就是不獨占一行的塊級元素。然后擁有塊級元素的屬性，可以設(shè)置寬度和高度。

line-height:

• 對于塊級元素，line-height指定了元素內(nèi)部line-boxes的最小高度
• 對于非替代行內(nèi)元素，line-height用于計算line-box的高度

• 對于替代行內(nèi)元素，例如input、button，line-height沒有影響

這個屬性可以實現(xiàn)多行文本垂直居中：

<div class="box"><div class="content">基于行高實現(xiàn)的...</div> </div>CSS： .box {width: 280px;line-height: 120px;background-color: #f0f3f9; // 為了看到外面盒子margin: auto; } .content {display: inline-block; // 設(shè)置為內(nèi)聯(lián)元素，并且可以有塊級屬性line-height: 20px;margin: 0 20px;text-align: left;vertical-align: middle; }

效果：

?

單行文本，垂直居中：

?

<div>單行文本垂直居中 </div>css: div{background-color: #abcdef; // 為了看line-height: 400px; // 只需要設(shè)置line-height }

?

效果圖：

?

最 后結(jié)語： 實現(xiàn)垂直居中的方法，我還是最喜歡flex，簡單易懂，沒那么多妖娥子。 只是現(xiàn)在兼容性不太好， 無奈臉。。。

?

本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=h01k11j&title=css 小知識點：inline/inline-block/line-height

總結(jié)

以上是生活随笔為你收集整理的css 小知识点：inline/inline-block/line-height的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。