深刻理解 vertical-align 屬性

時間 2019-11-08

標籤深刻理解 vertical align 屬性简体版

原文原文鏈接

從字面上看， vertical-align 很好理解，即控制元素的「垂直對齊」方式。參照 W3School 的說明：該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值。這會使元素下降而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。javascript

1 先單獨看一個簡單的例子css

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
img.middle {vertical-align:middle}
img.default{}
</style>
</head>
<body>
<p>
這是一幅<img class="top" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位於段落中的圖像。
</p> 
<p>
這是一幅<img class="bottom" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位於段落中的圖像。
</p>
<p>
這是一幅<img class="middle" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位於段落中的圖像。
</p>
<p>
這是一幅<img  class="default" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位於段落中的圖像。
</p>
</body>
</html>

注意這裏設置 vertical-align 屬性的是行內元素 img 而非塊級元素 p，其中 img 是 p 的子元素。效果以下：html

可見，默認狀況下 vertical-align 屬性的值是 baseline。而且在某些狀況下，vertical-align:top 和 vertical-align:text-top、vertical-align:bottom 和 vertical-align:text-bottom 以及 vertical-align:baseline可能會呈現相同的效果。java

2 再看一個 table 中的例子spa

<html>
<head>
<style type="text/css">
    td{ border:1px solid black;height:100px}
    td:nth-child(1){}
    td:nth-child(2){vertical-align:middle}
    td:nth-child(3){vertical-align:top}
    td:nth-child(4){vertical-align:bottom}
</style>
<body>
<table>
  <tr>
    <td> 單元格1 </td>
    <td> 單元格2 </td>
    <td> 單元格3 </td>
    <td> 單元格4 </td>
  </tr>
</table>
</body>
</html>

注意， td 元素的寬度是自適應內容寬度（在未設置 width 的狀況下）的，這點是表格元素最特殊的地方——列寬自適應。而其高度和其它全部元素同樣，是自適應內容高度的（在未設置 height 的狀況下）。爲了表現出 vertical-align 的效果，這裏設置了 height。效果以下：code

可見，td 元素的 vertical-align 屬性的默認值並不是 baseline 而是 middle。htm

3 再看一個複雜些的 table 中的例子ip

<html>
<head>
<style type="text/css">
   td{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc; height:300px}
   td div{ display:inline-block}
</style>
<body>

<table>
  <tr>
    <td>
      <div style="padding:40px 80px 10px 10px; background: #639146; color:#fff;">div+css</div>
      <div style="padding:60px 80px 10px 10px; background: #2B82EE; color:#fff;">javascript</div>
      <div style="padding:70px 80px 10px 10px; background: #F57900; color:#fff;">HTML5</div>
      <div style="padding:80px 80px 10px 10px; background: #BC1D49; color:#fff;">CSS3</div>
    </td>
  </tr>
</table>
</body>
</html>

效果以下：table

可見 td 中的內容是「垂直居中」的，可是這個垂直居中是以高度最大的元素爲標準的。而其餘的 div 元素則與其底線水平對齊，至關於class

td div{vertical-align:baseline}

仍是 vertical-align 屬性的默認值。所以，若要屬性全部內容垂直居中，須要以下代碼：

 td div{ display:inline-block;vertical-align:baseline}

效果以下：

總之：vertical-align 屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊方式，其默認值是 baseline，但對於 td 元素其默認值是 middle。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。