CSS中vertical-align屬性的作用是什么-創(chuàng)新互聯(lián)

CSS中vertical-align屬性的作用是什么？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、庫車ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的庫車網(wǎng)站制作公司

基線


要了解vertical-align屬性，必須懂得基線，怎么理解基線呢？

1、我們寫網(wǎng)頁是在一個(gè)矩形的顯示屏上，經(jīng)常是一行一行來布局，不可避免的是一行中會(huì)有多個(gè)內(nèi)容，那么這行內(nèi)容是如何上下對(duì)齊的呢？答案就是默認(rèn)讓他們的基線對(duì)齊。

2、各種字體、圖片、行內(nèi)html元素等可展示的內(nèi)容都有各自的基線，要想知道具體內(nèi)容的基線我們可以找一個(gè)簡單的參照物：小寫字母“x”，為什么找它呢？因?yàn)橛⑽淖帜傅幕€恰好就是小寫"x"的最下方，比較容易看出。

知道了以上兩點(diǎn)我們就可以很容易知道其他內(nèi)容元素的基線位置了，把其他元素和小寫“x”放在一行展示一下就一眼可以看出了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      border: 1px solid cyan;
      font-size: 30px;
    }
    div .span1 {
      display: inline-block;
      background-color: green;
    }
    div .span2 {
      display: inline-block;
      overflow: hidden;
      background-color: green;
    }
  </style>
</head>
<body>
  <div>
    x
    <img src="./demo.jpg" alt="">
    漢字
    <input type="text">
    <button>按鈕</button>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</body>
</html>

CSS中vertical-align屬性的作用是什么

如上圖紅色為該行元素基線，可以發(fā)現(xiàn)圖片和overflow:hidden樣式的元素的基線位置是最下方，中文、輸入框和button按鈕的基線位置都在中下方的位置?？梢钥闯?，這些行內(nèi)元素的排列是先按基線上下對(duì)齊，然后把父元素?fù)伍_。

值得注意的一點(diǎn)是，如果我們直接往div中放入一個(gè)圖片，會(huì)發(fā)現(xiàn)圖片底部距離div的下方有一個(gè)空隙；這是因?yàn)?行內(nèi)元素各自基線對(duì)齊以后還要和父元素的字體基線保持一致， 換句話說： 每個(gè)行內(nèi)元素的基線都要向父元素字體基線看齊。 但當(dāng)父元素的行高和字體大小樣式改變的時(shí)候，會(huì)使得父元素字體基線位置改變，從而使得行內(nèi)元素的位置整體上下移動(dòng)。雖然我們只看到了一個(gè)圖片沒有看到字，但是父元素有默認(rèn)的line-height和font-size，也會(huì)悄悄地影響布局，你會(huì)發(fā)現(xiàn)再往div中放入了一個(gè)小寫字母“x”，如下圖，它的下方剛好占據(jù)了空隙的位置。所以知道了這個(gè)原因，想去掉這個(gè)空隙的話，只需要把父元素的line-height和font-size設(shè)置為0，或者把圖片設(shè)置成塊級(jí)元素，讓它獨(dú)占一行就可以了。同樣的，如果div中直接放入一個(gè)input輸入框，輸入框上方也會(huì)有個(gè)空隙，與此類似，只是圖片和輸入框的基線位置不同罷了。

CSS中vertical-align屬性的作用是什么

vertical-align屬性


了解了上述行內(nèi)元素的排序原則，我們可能會(huì)有個(gè)疑問：如果我們需要某些行內(nèi)元素不按照基線排列怎么辦？答案就是使用vertical-align屬性。

首先，vertical-align屬性是針對(duì)行內(nèi)元素才有效果，它改變了當(dāng)前行內(nèi)元素和父元素字體兩者之間的對(duì)齊方式，默認(rèn)值是baseline，即兩者基線對(duì)齊，如上面我們測試的一樣。

關(guān)于各個(gè)屬性值可參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align ，可簡單在div中加入小寫字母“x”和一張圖片分別切換屬性進(jìn)行驗(yàn)證即可。

有兩個(gè)屬性稍作解釋：

1、當(dāng)設(shè)置屬性為"%"的時(shí)候，指的是當(dāng)前行內(nèi)元素的line-height屬性值的占比，可以設(shè)置成正負(fù)值，行內(nèi)元素基線相對(duì)父元素字體基線上下移動(dòng)這個(gè)百分比的距離。如下圖，設(shè)置圖片vertical-align: 50%; line-height: 30px; 本來圖片最下方應(yīng)該和"x"底部對(duì)齊的，現(xiàn)在上移了15px，如果是-50%，就會(huì)相對(duì)下移15px。當(dāng)然也可以直接設(shè)置為length，vertical-align：15px;效果也是一樣的。

CSS中vertical-align屬性的作用是什么

2、當(dāng)設(shè)置屬性為“middle”的時(shí)候，行內(nèi)元素中間位置會(huì)和父元素字體基線上方1/2"x-height"位置對(duì)齊，“x-height”其實(shí)就是父元素中小寫字母“x”的高度，簡單來說，就是行內(nèi)元素的中間位置會(huì)和父元素中的小寫字母“x”的中間位置（x的交叉點(diǎn)）對(duì)齊，就相當(dāng)于兩者中間對(duì)齊了。

CSS中vertical-align屬性的作用是什么

看完上述內(nèi)容，你們掌握CSS中vertical-align屬性的作用是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前標(biāo)題：CSS中vertical-align屬性的作用是什么-創(chuàng)新互聯(lián)
地址分享：http://bm7419.com/article6/dideog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、微信小程序、自適應(yīng)網(wǎng)站、虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管