Question

我是编码和CSS的新手，最近遇到了属性vertical-align。阅读了很多关于它是什么的文章，我仍然对它的用途一无所知，你什么时候使用它？

我的理解是它用于内联元素，如文本，图像等，以及表格中的文本或其他内联元素。它们不能用于块元素，如div，h1等。

如果我的理解是正确的，除了垂直对齐文字以表示图像或使用下标或上标之外，它还有什么其他用途？

Answer 1

它确实使用了垂直对齐内联元素。块级元素将忽略此属性。所以你的理解是正确的。

This blog提供了一些关于垂直对齐的背景信息和一些示例。它主要用于将图像垂直放置在一行文本中。或者替换tablecells上的valign属性。

所以看来你理解它是对的。有关vertical-align属性的详细信息，请参阅w3schools。

要清楚;不要尝试使用vertical-align来定位像div这样的块级元素。正如您已经提到的，它不会起作用，它适用于内联元素，如文本行中的图像。在元素上使用display: table-cell;和vertical-align是一个hack，请尽可能使用其他CSS技术垂直对齐div中的东西。

Answer 2

如果您想了解特定属性，总是值得阅读规格：
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/

然而，实际使用让我赞成，请参阅：

：）

Answer 3

垂直对齐，由W3C和大多数（tm）解释它，仅在表格单元格（<td>）中使用/生效，在某些浏览器上使用{{{ 1}}声明。

其余时间，它在很大程度上被浏览器忽视。

Answer 4

其他人对垂直对齐大多是正确的。现实是它有效，而不是你的想法。它适用于内联元素，而不是块元素。

在这种情况下，小提琴胜过千言万语。：）

Answer 5

垂直对齐就是它听起来的样子。它在父对象中垂直对齐元素;但是，并非所有浏览器都将其解释为相同。

Here's有关可用参数值的更深入信息。