CSS中的vertical-align之屬性知多少?

經(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">
                    ![](img/test.png)
                </div>
                <div class="img2">
                    ![](img/test.png)
                </div>
                <div class="img3">
                    ![](img/test.png)
                </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不起作用了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末澄阳,一起剝皮案震驚了整個(gè)濱河市拥知,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碎赢,老刑警劉巖低剔,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡襟齿,警方通過(guò)查閱死者的電腦和手機(jī)姻锁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)猜欺,“玉大人屋摔,你說(shuō)我怎么就攤上這事√胬妫” “怎么了钓试?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)副瀑。 經(jīng)常有香客問(wèn)我弓熏,道長(zhǎng),這世上最難降的妖魔是什么糠睡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任挽鞠,我火速辦了婚禮,結(jié)果婚禮上狈孔,老公的妹妹穿的比我還像新娘信认。我一直安慰自己,他們只是感情好均抽,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布嫁赏。 她就那樣靜靜地躺著,像睡著了一般油挥。 火紅的嫁衣襯著肌膚如雪潦蝇。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天深寥,我揣著相機(jī)與錄音蔚袍,去河邊找鬼舞箍。 笑死碎乃,一個(gè)胖子當(dāng)著我的面吹牛悔据,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闰集,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼沽讹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了返十?” 一聲冷哼從身側(cè)響起妥泉,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎洞坑,沒(méi)想到半個(gè)月后盲链,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年刽沾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了本慕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侧漓,死狀恐怖锅尘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情布蔗,我是刑警寧澤藤违,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站纵揍,受9級(jí)特大地震影響顿乒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜泽谨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一璧榄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吧雹,春花似錦骨杂、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至龙亲,卻和暖如春陕凹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鳄炉。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留搜骡,地道東北人拂盯。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像记靡,于是被迫代替她去往敵國(guó)和親谈竿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容