css雖然沒有算法，但還是很神奇的，踩到坑都不知道到底是哪里？看到張鑫旭大佬的博客講的超級好https://www.zhangxinxu.com

行高line-height用到的頻率極高，指一行文字的高度（兩行文字間基線的距離）就像英文本子里的 倒數第二條線。

line-height與line boxes高度

css中起著高度作用的heigh以及line-height，如果一個便簽沒有定義height屬性，那么最終表現的高度一定是line-height起作用。

一個空的<div></div>，沒有設置高度，但在元素內添加文字，這個div就有了高度，我一直以為就是文字把div撐起來了啊，但事實并非如此。真正撐起高度的是line-height。

<div class="test1">測試</div> <div class="test2">測試</div> css: .test1{ font-size: 20px;? ?border: 1px solid #ccc;? ?background: #eee;? ?line-height: 0px;?} .test2{?font-size: 0px;? ??border: 1px solid #ccc;? ?background: #eee;? ?line-height: 20px;?}

有圖有真相的證明了真正撐起div的高度的不是文字內容，而是line-height。

那到底line-height行高是怎么產生高低的？在inline box 模型中。有個lineboxes(是看不見的，作用就是包裹文字),一行文字一個line boxes（每行文字都有一個line boxes包裹）。line boxes并沒有什么特性，就高度。所以一個沒有設置height屬性的div的高度就是由一個個line boxes 的高度堆積而成的。

但line boxes的高度真正取決于里面的inline boxes。圖片，文字，<span>便簽等帶inline屬性的標簽。他看哪個inline boxes的實際line-height值最高，最高個的那個line-height值作為line boxes的高度

行高的垂直居中性

上面那張測試的圖，證明，無論你文字是大還是小，其占據空間都是文字內容的公共水平中垂線。即使line boxes的高度為0，但他的文字的水平中垂線對稱分布，這一特性可以實現文字或圖片的垂直居中對齊。

?

?

文字或圖片垂直居中對齊問題 單行文字垂直居中：設置line-height。 一直一來我們記得但文本居中的方法height與line-height等高，但其實直接設置line-height就可以，那個height是多余的。 多文本垂直居中：

?

p{ 　　line-height: 150px; 　　border: 1px dashed #ccc; } span{ 　　display: inline-block;? ? ? ?/*將多行文本當一行處理*/ 　　line-height: 1.4em;? ? ? ? ?/*line-height具有繼承性，需要重新設置*/ 　　vertical-align: middle;? ? ?/*中間線對齊*/ } <p> 　　<span>line-height為150px，font-size:12px<br>這里是第二行用來測試多行的顯示效果</span> </p>

多圖片垂直居中

因為多圖片，但img不支持浮動，所有外面在套一層

方法1??? ?圖片北京定位法：background-position：center：

?

ul li { 　　width: 1em; /*根據font-size*/ 　　height: 1em; 　　padding: 0.1em; 　　margin: 0 0.1em 0 0; 　　font-size: 128px; 　　float: left; 　　border: 1px solid #beceeb; }
ul li img { 　　display: block; 　　width: 100%; 　　height: 100%; 　　background-repeat: no-repeat; 　　background-position: center; }

?

方法2? ??display:table-cell法

ul li { float: left; margin-right: 13px; }
ul li div { display: table-cell; width: 144px; height: 144px; border: 1px solid #beceeb; font-size: 118px; text-align: center; }
ul li div img { vertical-align: middle; width: 100px; height: 100px; } <ul> <li> <div> <img src="background.png" /> </div> </li> </ul> 方法3：inline-block垂直對齊? ? 此方法只使用與多種圖片對齊，如果只有一張圖片，那就只能與空格對齊了 a{

display: inline-block;

width: 200px;

text-align: center;

vertical-align: center;

border: 1px solid peru;

} img{ vertical-align: middle; border: 1px solid red; } .one{ width: 100px; height: 50px; } .two{ width: 100px; height: 100px; } <div> <a href="#"><img class="one" src="1.jpg" alt=""></a> <a href="#"><img class="two" src="2.jpg" alt=""></a> </div>

轉載于:https://www.cnblogs.com/jiaobaba/p/10467399.html

總結

以上是生活随笔為你收集整理的css之line-height及图片文字垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。