什么是垂直对齐用于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？

回答

相关问题