HTML和CSS進階：深刻vertical-align

時間 2019-11-12

標籤 html css 進階深刻 vertical align 欄目 HTML 简体版

原文原文鏈接

來源： http://www.w3cfuns.com/notes/33234/4e00242a93a05fc54adc4a1c5eaef8ed.htmlcss

vertical-align，不少人對這個屬性感到很陌生，也不知道怎麼去使用，其實這都是因爲沒有深刻屬性的本質所致使的。vertical-align屬性很是複雜，可是也至關強大。這一節給你們介紹vertical-align屬性最實用的技巧，而對於不經常使用的東西則不進行深刻研究。
W3C官方對vertical-align屬性的定義有4個方面：
（1）vertical-align屬性用於定義「周圍的文字、inline元素以及inline-block元素」相對於該元素基線的垂直對齊方式。這裏的「該元素」指的是被定義了vertical-align屬性的元素；
（2）在表格單元格中，vertical-align屬性能夠定義單元格td元素中內容的對齊方式。td元素是table-cell元素，也就是說vertical-align屬性對table-cell類型元素有效；
（3）vertical-align屬性對inline元素、inline-block元素和table-cell元素有效，對block元素無效；
（4）vertical-align屬性容許指定負長度值（如-2px）和百分比值（如50%）；
從上一節咱們知道，每一行文字能夠當作一個行盒子，其實每個inline-block元素也能夠當作一個行盒子。其中，每個行盒子都有4條線：（1）頂線；（2）中線；（3）基線；（5）底線。這4條線跟英文簿中的4條線是類似的。html

vertical-align屬性中的「基線」跟line-height屬性中的基線是同樣的道理。在CSS中，vertical-align屬性最見的屬性值有4個：top（頂部對齊）、middle（中部對齊）、baseline（基線對齊）、bottom（底部對齊）。
1、 vertical-align屬性取值
vertical-align屬性取值有3種狀況：（1）負值；（2）百分比；（3）關鍵字。
  一、負值
vertical-align屬性取值能夠爲負值，例如「vertical-align:-2px」表示元素相對於基線向下偏移2px。此方法經常用於解決單選框或複選框與文字垂直對齊的問題。對於這個技巧，咱們在下一章「表單效果」會詳細介紹。
  二、百分比
vertical-align屬性取值能夠爲百分比，這個百分比是相對於當前元素所繼承的line-height屬性值決定的。
舉個例子，對於「vertical-align:50%」，假如當前元素所繼承的line-height爲20px，則「vertical-align:50%」實際上等價於「vertical-align:10px」。其中， vertical-align:10px」表示元素相對於基線向上偏移10px。
  三、關鍵字
vertical屬性取值能夠爲關鍵字，取值以下：
取值說明
top          頂部對齊
middle 中部對齊
baseline 基線對齊
bottom 底部對齊
除了以上這些，vertical-align屬性取值還能夠爲text-top、text-bottom、super、sub等關鍵字。不過其餘關鍵字在實際開發中不多用得上，所以咱們只須要掌握top、middle、baseline、bottom這4個屬性值就行。
舉例：前端

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align屬性</title>
    <style type="text/css">
        img{width:80px;height:80px;}
        #img1{vertical-align:top;}
        #img2{vertical-align:middle;}
        #img3{vertical-align:bottom;}
        #img4{vertical-align:baseline;}
    </style>
</head>
<body>
    綠葉學習網<img id="img1" src="images/girl.png" alt=""/>綠葉學習網（<strong>top</strong>）
    <hr/>
    綠葉學習網<img id="img2" src="images/girl.png" alt=""/>綠葉學習網（<strong>middle</strong>）
    <hr/>
    綠葉學習網<img id="img3" src="images/girl.png" alt=""/>綠葉學習網（<strong>bottom</strong>）
    <hr/>
    綠葉學習網<img id="img4" src="images/girl.png" alt=""/>綠葉學習網（<strong>baseline</strong>）
</body>
</html>

在瀏覽器預覽效果以下：瀏覽器

分析：
根據W3C的定義「vertical-align屬性用於定義周圍文字、inline元素或inline-block元素的基線相對於該元素的基線的垂直對齊方式」。在這個例子中，vertical-align屬性定義了周圍的文字相對於img元素基線的垂直對齊方式。
此外，「vertical-align:baseline」和「vertical-align:bottom」是有區別的，請仔細觀察預覽效果。
2、vertical-align屬性應用
咱們從如下3個方面來介紹一下vertical-align屬性的使用狀況：（1）inline-block元素；（2）inline元素和block元素；（3）table-cell元素。
一、inline元素和inline-block元素
在HTML中，常見的inline-block元素有2個：img元素和input元素。對於這兩個inline-block元素，咱們必定要記住。
舉例：學習

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        strong
        {
            font-size:40px;
            border:1px solid red;
        }
        span{font-size:12px;}
    </style>
</head>
<body>
    <span>綠葉學習網</span><strong>綠葉學習網</strong><span>綠葉學習網</span>
</body>
</html>

在瀏覽器預覽效果以下：spa

分析：
當咱們在CSS中爲strong元素添加「vertical-align:center;」以後，瀏覽器預覽效果以下：

舉例：code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
        img{vertical-align:middle;}
    </style>
</head>
<body>
    <div>綠葉學習網<img src="images/girl.png" alt=""/>綠葉學習網（<strong>middle</strong>）        </div>
</body>
</html>

在瀏覽器預覽效果以下：xml

二、block元素
vertical-align屬性對inline元素、inline-block元素和table-cell元素有效，對block元素無效。
舉例：htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
        div
        {
            vertical-align:middle;
            width:120px;
            height:120px;
         border:1px solid gray;
        }
    </style>
</head>
<body>
    <div><img src="images/girl.png" alt=""/></div>
</body>
</html>

在瀏覽器預覽效果以下：繼承

分析：
div是block元素，因此vertical-align屬性對其無效。若是想要在div中實現圖片的垂直居中，咱們能夠先爲div定義「display:table-cell」，也就是將block元素轉化爲table-cell元素（表格單元格），而後再使用「vertical-align:middle」就能夠實現了。
舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
        div
        {
            display:table-cell;
            vertical-align:middle;
            width:120px;
            height:120px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div><img src="images/girl.png" alt=""/></div>
</body>
</html>

在瀏覽器預覽效果以下：

分析：
在div中實現圖片垂直居中是很常見的技巧，咱們在後續章節會給你們介紹更多垂直居中的技巧。
  三、table-cell元素
W3C定義：在表格單元格中，vertical-align屬性能夠定義單元格中內容的對齊方式。也就是說vertical-align屬性對table-cell類型元素有效。
這裏要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大區別的：
  （1）inline元素和inline-block元素的vertical-align是針對周圍的元素來講，vertical定義的是周圍元素相對於當前元素的對齊方式；
  （2）table-cell元素的vertical-align屬性是針對自身而言。vertical-align定義的是內部子元素相對於自身的對齊方式；
舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
        td
        {
            width:120px;
            height:120px;
            border:1px solid gray;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><img src="images/girl.png" alt=""/></td>
            <td><img src="images/girl.png" alt=""/></td>
            <td><img src="images/girl.png" alt=""/></td>
        </tr>
    </table>
</body>
</html>

在瀏覽器預覽效果以下：

【後話】：這一章學習到的知識，估計已經狠狠地給那些每天自誇「精通CSS」的同窗幾巴掌了。原來，CSS也是如此的博大精深，並不是咱們想象中那麼簡單。對於HTML、CSS和JavaScript這3大核心技術，仍是但願你們可以踏踏實實地深刻研究，這樣咱們的前端之路纔有可能走得更遠。