Vertical-Align:一个完整​​的解释

时间:2013-10-28 15:41:38

标签: html css vertical-alignment

我一直在努力进行垂直对齐,这是一个看似简单的过程,在不同的语言和元素类型中有很多特性。我已经通过stackexchange做了很多阅读,似乎无法找到一个共同的理解线程。

以下是我能够收集的规则:

1)垂直对齐在<\div>中不起作用,您必须设置div {display: table-cell; vertical-align: middle}

这似乎是一个很大的麻烦,特别是因为表格单元格覆盖高度限制,即使溢出设置为隐藏并扩展以适应内容,这意味着垂直“中心”是可变的。

我刚从Pinterest中读到了button {vertical-align: middle}的一些源代码,但其他vertical-align命令似乎没有用。看起来好像按钮默认在中间对齐。

有人可以为vertical-align属性提供明确的解释吗?

  • 什么html元素回复 vertical-align
  • 哪些html元素具有默认 vertical-align属性?
  • 哪些html元素具有不可覆盖的 vertical-align属性?

    关于理解特质的任何线索也会有所帮助!

    提前致谢!

  • 2 个答案:

    答案 0 :(得分:1)

    对于vertical-align是两个选项

    一个在元素上。

    垂直对齐适用于inline元素而非块元素。然后,您可以直接在元素中设置proeperty以与其他内联元素对齐。

    两个在容器上

    您可以像table-cell一样在容器上设置属性。您可以对td上的元素进行垂直对齐,也可以使用divsdisplay:tabledisplay:table-cell div进行垂直对齐,将其内容垂直对齐。

    答案 1 :(得分:0)

    http://css-tricks.com/centering-in-the-unknown/

    只需浏览一下它会对你有所帮助,但只是一个粗略的想法:)