經(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)解決荤堪;
代碼如下: