什麼是垂直對齊用於CSS？

我是新來的編程以及CSS的世界，最近遇到屬性vertical-align。在閱讀了許多關於它是什麼的文章之後，我仍然無能爲力，什麼時候使用它？什麼是垂直對齊用於CSS？

我的理解是，它用於內聯元素，如文本，圖像等，以及表格中的文本或其他內聯元素。它們不能用於塊元素，如div，h1等。

如果我的理解是正確的，除了垂直對齊文本以表示圖像或使用下標或上標之外，它還提供了什麼其他目的？

2011-05-25 PeanutsMonkey

我最經常用它爲表的細胞內居中文本，系統默認的文本是所有頂級每個細胞排列，看起來醜陋。 – 2011-05-25 23:04:23

我發現'vertical-align'並沒有什麼用處，因爲塊級元素愚蠢地忽略了這個屬性。如果它可以用來垂直居中一個div的內容，那將是非常棒的，但是遺憾的是，一些象牙塔的人決定不這樣做。 – aroth 2011-05-25 23:08:02

它總是值得一讀的規格，如果你想了解一個特定屬性：
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
一個常見的情況是垂直居中（聯合display: table-cell）：

http://jsfiddle.net/7eTb2/
```
div { 
    background: #ccc; 
    width: 200px; 
    height: 300px; 
    padding: 5px; 

    display: table-cell; 
    vertical-align: middle 
} 
```
這有點差異不使用這種技術很難垂直居中。
另一個常見用例是涉及到元素是inline或inline-block。
在這裏看到的東西不同vertical-align值發生的例子： http://www.brunildo.org/test/inline-block.html
另一個很好的鏈接閱讀：http://css-tricks.com/what-is-vertical-align/

然而，這是實際使用是讓我upvotes，請參閱：

https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

來源

2011-05-25 23:05:21 thirtydot

感謝您的例子以及鏈接。我已經閱讀過鏈接'Hhat is vertical align'，但我不確定我的理解是否正確。內聯塊是我正在讀的東西，所以當你使用它們時，它們是什麼，等等，但是感謝鏈接。 – PeanutsMonkey 2011-05-25 23:11:01

垂直對齊正是它聽起來像。它在父對象中垂直對齊元素;然而，並非所有的瀏覽器都將它解釋爲相同的。

Here's有關可用參數值的更深入的信息。

來源

2011-05-25 23:00:51 akuta

@B。伯克 - 我很抱歉，但可以詳細說明你的答案，因爲我已經閱讀你發佈的鏈接，但對我來說這仍然沒有意義。什麼是父對象的例子？ – PeanutsMonkey 2011-05-25 23:04:52

絕對我可以詳細說明：父對象將是包含您正在使用的元素的對象。這個例子就是裏面帶有文本的div。 div將是文本元素的父對象。如果這個div是頁面上唯一的容器對象，body標籤將是div元素的父對象。更有意義？基本上看來你正試圖給一個沒有它的參數提供更多的細節。 :)它只是說：垂直對齊項目。 – akuta 2011-05-25 23:07:37

父對象可以是任何塊級元素，但將其想象爲一張紙上的簡單正方形。在那個正方形的中間畫一條水平線，這就是「垂直對齊」將放置在正方形內的任何位置。 – Dolph 2011-05-25 23:08:13

它確實使用了垂直對齊內聯元素。塊級元素將忽略此屬性。所以你的理解是對的。

This blog給出了一些關於vertical-align的背景信息以及一些例子。它主要用於在一行文本中垂直放置圖像。或者替換表格單元格上的valign屬性。

因此，你似乎很理解它。有關垂直對齊屬性的詳細信息，請參閱w3schools。

只是要清楚;不要嘗試使用vertical-align來定位像div這樣的blocklevel元素。正如你已經提到過的，它不適用於內聯元素，例如一行文本中的圖像。在一個元素上使用display: table-cell;和垂直對齊是一種黑客行爲，請儘可能使用其他CSS技術垂直對齊div中的內容。

來源

2011-05-25 23:03:41

謝謝。我確實閱讀了您在我的問題之前發佈的鏈接。因此，所有垂直對齊用於將圖像垂直放置到文本或文本到圖像以及替換表格單元格上的valign屬性？我也明白，默認屬性值是基線。如果是這樣，爲什麼在重置CSS文件中使用它。例如，在http://meyerweb.com/eric/tools/css/reset/reset.css – PeanutsMonkey 2011-05-25 23:07:03

@PananutsMonkey：不同的瀏覽器針對'vertical-align'的不同元素具有不同的默認值。將其設置爲「所有元素的基線」可以幫助確保一致性。 – thirtydot 2011-05-25 23:13:19

使用reset.css文件時，您希望確保所有瀏覽器的行爲相同。我想有一些瀏覽器沒有使用基線作爲所有元素的默認設置。所以reset.css會讓你確信。 – 2011-05-25 23:13:56

垂直對齊，由W3C和如何最（TM）解釋它，僅用來/發生在那些表細胞（<td>）元素影響，並且在某些瀏覽器，元件與display: table-cell聲明。

其餘的時間，它在很大程度上被瀏覽器忽視。

來源

2011-05-25 23:06:03 colinross

對於垂直對齊，其他人大多都是正確的。事實是，它是有效的，而不是你的想法。它用於內聯元素，而不是塊元素。

在這種情況下，小提琴勝過千言萬語。 :)

http://jsfiddle.net/JJfuj/

來源

2011-05-25 23:12:48 dtbarne

什麼是垂直對齊用於CSS？

回答

相關問題