什么是垂直对齐？

CSS有一个名为垂直对齐属性。它可以是一个有点混乱，当你第一次学习一下吧，所以我想我们可以通过它使用一点点。其基本用法是这样的：

 

img { 
  vertical-align: middle;
}

在这种情况下使用的通知，它被施加到img元素。图片自然是内联元素，这意味着他们坐在右侧嵌入文本，如果他们能。但什么是“坐内联”意味着什么？这就是垂直对齐的用武之地。


有效值为：基准线，分，超级，顶级，文字上，中，下，文本底，长度或百分比值。
The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.

混乱中，在我看来，套在当人们尝试使用基于块级元素的垂直对齐，并得到任何结果。如果你有一个内部的大格小格，想垂直居中中较小的一个，垂直对齐不会帮你。道格拉斯·赫瑞有方法对在如何做到这一点的伍兹一个很好的综述。

Baseline
垂直对齐的默认值（如果你声明没有），是底线。图像将排队与在文本的基线的文本。请注意，字母下行探底低于基准。图像不排队与下行的最低点，这不是基线。



Middle

也许对于垂直对齐最常见的用途是将其设置为“中等”的图标大小的图像。结果是基本一致的跨浏览器：



浏览器就可以定心与图像的像素高度文本的像素高度上最好的工作：



请注意，如果该图像是比当前字体大小和行高时，它将以下行下推如果需要的话：



Text-bottom
从类型的基线不同，是文本的底部，其中，下伸下去。图像可以用这个深度，以及对齐：


Text-top
对面文本底，是文本上方，最高点在当前字体的大小。您可以对齐到这一点。需要注意的是当前字体，格鲁吉亚，可能有一些伸比这里所代表因此小的差距较高。




Top & Bottom

顶部和底部工作类似于文本的顶部和文本底部，但它们不被约束的文本，而是由任何东西都在该行（如另一图像）。所以，如果有在同一行上的两个图像，不同高度的和两者比在该线的文本时，它们的顶部（或底部）将对齐不管文字大小的。


 

Sub & Super

这些数值代表标和下标，所以用这些方法对齐元素赞同这样：

Vertical Align on Table Cells(垂直对齐表格单元格)
不同的图像，表格单元格默认为中间垂直对齐方式：




如果您希望看到对准单元的顶部或底部的文本时，它需要伸展超出它需要的高度，适用于顶部或底部的垂直取向：



在表格单元格当使用垂直对齐，与顶部，底部粘连，中间是你最好的选择。无其他值做出一大堆的道理无论如何，有不可预知的跨浏览器的结果。例如，设置单元格文本底部对齐在IE6中的文本的底部，并在Safari4的顶部将其设置为子导致IE 6中部对齐和顶部在Safari4。

vertical-align and inline-block

图片，虽然在技术上行内级元素，表现更像inline-block的元素。您可以设置其宽度和高度也听从的是，与大多数内联元素。

inline-block的元素表现得就像与垂直对齐的图像，所以参照上面。但是，请注意，并非所有的浏览器把inline-block的元素相同的方式，使垂直对齐可能是你最担心。这是另一个故事虽然....

Deprecated as an attribute

偶尔你会看到用于表格单元格来完成垂直对齐方式“VALIGN”。例如<TD VALIGN=顶部>。应当指出的是，该属性被弃用，不应使用。真的是没有任何理由也无妨，你可以用CSS做吧。