經(jīng)歷過很多次的面試之后，發(fā)現(xiàn)很多公司都會(huì)問道一個(gè)問題，那就是關(guān)于如何讓一個(gè)元素水平居中和垂直居中，在這里就是仁者見仁智者見智，實(shí)現(xiàn)的方法有很多種，這里我也就不多說了，下期我會(huì)寫一篇關(guān)于居中的文檔，下面就主要介紹一下css中的vertical-align這個(gè)屬性以及它的屬性值。
1. vertical-align是干嘛的?
看名字就知道，
垂直-對(duì)齊；簡(jiǎn)單點(diǎn)就是設(shè)置元素的垂直排列方式；
說具體點(diǎn)就是用來定義
行內(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ù)來說就是0%。<length>：
用長度值指定由基線算起的偏移量。可以為負(fù)值?；€對(duì)于數(shù)值來說為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中，要將-去掉，緊跟的字母大寫；
obj.style.verticalAlign = "相應(yīng)屬性值";
</script>
5. 為什么我們有時(shí)候設(shè)置的vertical-align屬性無效，不起作用？
-
瀏覽器支持方面：
首先，所有瀏覽器都支持 vertical-align 屬性的；
但是要注意：
任何的版本的Internet Explorer （包括 IE8）都不支持屬性值"inherit"； -
該元素生成的框的類型：
每個(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 屬性無效的一種情況。
但是我們可以使用 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,但是如果是多行的文字，貌似行不通，可以使用類似6.1來解決；
代碼如下：
很奇怪，這里我設(shè)置了display: tale-cell;之后，我發(fā)現(xiàn)設(shè)置margin不起作用了
