什么是CSS中使用的vertical-align？

Question

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

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

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

Answer 1

• 如果您想了解特定属性，则始终值得阅读规范：
  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/

然而，它的真正用途是让我投票，请参阅：

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

:)