line-height 与垂直居中!
在此之前，對(duì)于line-height 與垂直居中的問(wèn)題，經(jīng)常碰到。?
比如，圖片與span在同一個(gè)box中的時(shí)候，竟然會(huì)各種偏移。要想達(dá)到理想的效果真的是各種難。
有時(shí)間，決定認(rèn)真的啃一啃。
一 line-heigtht:
1. line-height: 顧名思義，行高，指代文本中，行與行之間的基線間的距離。
2. 基線： 這里的基線不是指代文字的底部，而是英文字母x 的下沿。
3 行距： 行距表示文字的高度與行高的差距。
4. 內(nèi)容區(qū)域： 行中每一個(gè)元素都有一快內(nèi)容區(qū)域，主要由字體的大小決定。
5 行內(nèi)框： 在默認(rèn)條件下，行內(nèi)框是等于內(nèi)容區(qū)域的。在如果設(shè)置了行高，那么，行內(nèi)框就會(huì)等于行高，并且在內(nèi)容區(qū)域的兩側(cè)添加空白。
6 行框： 行框在默認(rèn)條件下是等于行內(nèi)框，但是如果在同一行中，有行高超過(guò)了當(dāng)前元素的行內(nèi)框高度的時(shí)候，當(dāng)前元素的行框就會(huì)默認(rèn)為最高的行高的高度。
這里的行框的告訴只與本行中的最高的行高的關(guān)，與關(guān)元素的告訴無(wú)關(guān)。這也是導(dǎo)致圖片和文字在同一行時(shí)不能對(duì)齊的原因。
7 在有圖片時(shí)，圖片會(huì)將行框的高度撐到圖片的高度，但同時(shí)默認(rèn)的對(duì)其方式為基級(jí)對(duì)齊方式。
具體如下圖所示：
二 vertical-align
垂直居中，這里需要注意的一點(diǎn)就是，vertical-align 只能對(duì)行內(nèi)元素有效，對(duì)說(shuō)類(lèi)似div,p之類(lèi)的塊級(jí)元素是無(wú)效的。
需要垂直居中，只需要：vertical-align:middel
?
三 zoom
曾經(jīng)一直很奇怪很多的網(wǎng)站為什么給元素總是要加一個(gè)zoom:1的樣式。
原來(lái)這一切都是為了兼容ie 6/7/8 , 用來(lái)觸發(fā)ie的haslayout內(nèi)部屬性。導(dǎo)致ie重新計(jì)算自身的高度。
大多數(shù)因?yàn)楦?dòng)所產(chǎn)生和定位問(wèn)題bug 都可以用zoom來(lái)解決。
?
四 inline-block
inline屬性的特點(diǎn)是，行內(nèi)元素，能夠在同一行內(nèi)顯示，但是其高度，寬度，行高，margin,padding 等元素都不能設(shè)置。所以就產(chǎn)生了inline-block;
inline-block行內(nèi)元素，但不失block 的效果。在是在ie 6/7下沒(méi)有被完全支持。
關(guān)于ie 6/7對(duì)于 inline-block的不完全支持，也可以采用上面的方法解決。
如：
display:inline-block; *display:inline; zoom:1; width:80px; height:20px; margin:10px; padding:10px; text-align:center; background:#cfc;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>span</title> <style type="text/css"> .test{ line-height: 50px; } .test img{ vertical-align: middle; height: 50px; line-height: 50px; } .test-span{ line-height: 50px; } </style> </head> <body> <p class="test"><img src="未標(biāo)題-1.jpg" width="265" height="203" /><span class="test-span">dd</span></p> </body> </html>
這里會(huì)存在一個(gè)小問(wèn)題, 圖片img會(huì)的p元素的頂部存在3像素作用的間距。
百度之，原來(lái)是個(gè)bug , 解決辦法蠻多
第一種就是換doctype為<!doctype html>
其它如果不改doctype可以去設(shè)置含有img元素的高度，并且需要float一下就ok了。
.test{ line-height: 50px; flost:left; height: 50px; }
注意問(wèn)題：這里需要垂直居中，是采用設(shè)置img的vertical-align的屬性，而不是文本。
當(dāng)然這也不是絕對(duì)的,具體需要看那一個(gè)元素的高度更高，就去設(shè)置哪一個(gè)元素的vertical-align屬性。
當(dāng)然還有一個(gè)經(jīng)驗(yàn)之談就是在切圖的時(shí)候，將圖的高度切為單數(shù)。這樣的ie6/7下就不會(huì)有多出的1px的問(wèn)題。
轉(zhuǎn)載于:https://www.cnblogs.com/alphafly/p/4692619.html
總結(jié)
以上是生活随笔為你收集整理的line-height 与垂直居中!的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Xcode清缓存
- 下一篇： 【代码笔记】iOS-对UIView进行截