經(jīng)歷過(guò)很多次的面試之后崇众，發(fā)現(xiàn)很多公司都會(huì)問(wèn)道一個(gè)問(wèn)題掂僵，那就是關(guān)于如何讓一個(gè)元素水平居中和垂直居中，在這里就是仁者見(jiàn)仁智者見(jiàn)智顷歌，實(shí)現(xiàn)的方法有很多種锰蓬，這里我也就不多說(shuō)了，下期我會(huì)寫(xiě)一篇關(guān)于居中的文檔眯漩，下面就主要介紹一下css中的vertical-align這個(gè)屬性以及它的屬性值芹扭。
1. vertical-align是干嘛的?
看名字就知道，
垂直-對(duì)齊赦抖；簡(jiǎn)單點(diǎn)就是設(shè)置元素的垂直排列方式舱卡；
說(shuō)具體點(diǎn)就是用來(lái)定義
行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊;默認(rèn)值是
baseline；不具有繼承性摹芙；
2. 什么是基線灼狰？
3. vertical-align有哪些屬性值？
它的屬性值很多浮禾，如下：
常用的也就
middle/bottom/top交胚；它的默認(rèn)值是
baseline；其他的屬性值還有
sub/super/text-top/text-bottom/inherit等等盈电；
具體含義：
-
baseline：
將支持valign特性的對(duì)象的內(nèi)容與基線對(duì)齊
sub：
垂直對(duì)齊文本的下標(biāo)super：
垂直對(duì)齊文本的上標(biāo)
top：
將支持valign特性的對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊middle：
將支持valign特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊bottom：
將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊
text-top：
將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊text-bottom：
將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊
<percentage>：
用百分比指定由基線算起的偏移量蝴簇。可以為負(fù)值〈抑悖基線對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%熬词。<length>：
用長(zhǎng)度值指定由基線算起的偏移量。可以為負(fù)值』ナ埃基線對(duì)于數(shù)值來(lái)說(shuō)為0歪今。（CSS2）為負(fù)值的話，這會(huì)使元素降低而不是升高颜矿。
其實(shí)我也看得不太明白,看下圖吧:
4. 怎么使用該屬性寄猩？
在css中使用：
方式很多種，就以內(nèi)聯(lián)式為例：
<style>
選擇器 {
vertical-align: 對(duì)應(yīng)屬性值;
}
</style>
在js中使用：
<script>
var obj = document.getElement......;
// 在js中骑疆，要將-去掉田篇，緊跟的字母大寫(xiě)；
obj.style.verticalAlign = "相應(yīng)屬性值";
</script>
5. 為什么我們有時(shí)候設(shè)置的vertical-align屬性無(wú)效箍铭，不起作用泊柬？
-
瀏覽器支持方面：
首先，所有瀏覽器都支持 vertical-align 屬性的诈火；
但是要注意：
任何的版本的Internet Explorer （包括 IE8）都不支持屬性值"inherit"兽赁； -
該元素生成的框的類(lèi)型：
每個(gè)元素都有對(duì)應(yīng)的display屬性，修改display屬性值即可柄瑰；
6. 舉個(gè)栗子：
6.1 給div設(shè)置vertical-align為什么不起作用闸氮？
vertical-align 只對(duì)行內(nèi)元素有效，對(duì)塊級(jí)元素?zé)o效教沾。
這就是為什么有的時(shí)候使用 vertical-align 屬性無(wú)效的一種情況。
但是我們可以使用 display 屬性译断，設(shè)置其值為table-cell授翻，將塊元素轉(zhuǎn)化為單元格，然后再使用vertical-align屬性孙咪。
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 900px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
}
img {
width: 300px;
height: 100px;
}
.img1 {
vertical-align: top;
display: table-cell;
height: 300px;
}
.img2 {
vertical-align: middle;
display: table-cell;
height: 300px;
}
.img3 {
vertical-align: bottom;
display: table-cell;
height: 300px;
}
</style>
</head>
<body>
<div id="test">
<div class="wrap">
<div class="img1">
</div>
<div class="img2">
</div>
<div class="img3">
</div>
</div>
</div>
</body>
</html>
效果如下：
6.2 怎么兼容文字多行的span標(biāo)簽堪唐，使其文字垂直居中？
對(duì)于文字居中翎蹈，我們可以設(shè)置line-height,但是如果是多行的文字淮菠，貌似行不通，可以使用類(lèi)似6.1來(lái)解決荤堪；
代碼如下：
很奇怪合陵，這里我設(shè)置了display: tale-cell;之后，我發(fā)現(xiàn)設(shè)置margin不起作用了
