我们可以想到的最简单的垂直对齐

问题描述

总而言之，在容器中垂直对齐内容的方法很少。
这些是主要的方法（如果你现在有一个完全不同的方法，你会提供一个很大的例子 - 我会在这里合并）

1. 使用 position 和 transform 属性 - 这一个是很好，但对我来说，是有点过分，特别是如果我们考虑呈现优化问题。


2. 使用 display：inline-block 属性与一个额外的辅助块 - 。因为使用额外的DOM元素不认为这种方法是好的。将不工作在IE7。还值得一提的是（感谢@nclenorton提到这一点），我们可以使用：之前或：之后生成内容。但是，再次 - 。


3. 使用 display：table 和 display：table-cell 属性 - 。有时这种方法是整洁的，有时不是。注意，与其他示例相反，提供了子单元格宽度的问题。 /jsfiddle.net/9Phgg/9/rel =nofollow> http://jsfiddle.net/9Phgg/9/ - 这是最性感的方式来处理事情，但正如我们所知道的，规范不是100％完成。此外，Opera不支持flex box。是的，当然，甚至不想在IE7尝试这样的东西。
   
   
   

   我的问题是：关于所有上述方法将失败的事实IE7，在所有现代浏览器和 IE7中垂直居中元素的最通用，优雅，简单和正确的方法是什么？

   
   
   

   有一种强烈的感觉，helas，虽然是2012年，使用表布局仍然是答案。我已经看到一些异常的方法，使用，例如 position：absolute 或甚至javascript表达式，但这不是优雅和简单。

经验丰富的html开发人员，如果我错了，请更正我。

UPD：
实际上，还有一种方法，但是我发现它根本上是错误的，并且由于许多原因而不适用。但值得一提。默认情况下，按钮中的任何内容都是垂直居中，因此请注意 - 。这将工作在IE7，但我们都是成年人在这里，我希望，明白这是不适当的）））

解决方案

如果我需要IE7支持，我倾向于使用 display：inline-block with a extra element方法。此 在IE7中使用，这里是示例 a>。

如果我不需要IE7支持，我通常使用 display：table-cell p>

有时，我不能使用 display：table-cell 在 display：table-cell 元素的底部。 position：relative 不适用于表格单元格，至少在Firefox中。在这些情况下，我使用 display：inline-block 方法，除了extra元素通过：before ，它保持HTML干净。

To sum it up, there are few approaches to align content vertically in container.These are main approaches (if you now some completely different way to do it, it would be very generous of you to provide example - I will incorporate it here)

1. using position and transform properties - http://jsfiddle.net/EjV4V/3/ This one is nice, but as to me, is a little bit overkill, especially if we consider rendering optimization issues. Will work in all modern browsers, won't work in IE7.
2. using display: inline-block property with one additional auxiliary block - http://jsfiddle.net/mmxm4/3/. Because of using additional DOM element don't think this approach is good. Won't work in IE7. It worth to mention also (thanks @nclenorton for mentioning this), that we can use :before or :after generated content. But, once again - not in IE7.
3. using display: table and display: table-cell properties - http://jsfiddle.net/Ppk3p/2/. Sometimes this approach is neat, sometimes not. Note that, contrary to other example provided there is a problem with child cell width. Any way, won't work in IE7.

4. using display: box - http://jsfiddle.net/9Phgg/9/ - this is the most sexy way to handle things, but as all we know, spec is not 100% completed. Moreover, Opera does not support flex box. And yes, of course, don't even think about trying something like this in IE7.

   My question is: "Regarding the fact that all of abovementioned approaches will fail in IE7, what is the most general, elegant, simple and right way to center elements vertically in all modern browsers and IE7?".

   I have a strong feeling that, helas, though it is year 2012, using table layout is still the answer. I've seen some exotic approaches, using, for example position: absolute or even javascript expressions, but this is far from elegant and simple.

Seasoned html-developers, correct me if I'm wrong.

UPD: Actually, there is one more approach, but I find it radically wrong and unsuable for many reasons. But it worth to mention. Anything in button is centered vertically by default, so behold - http://jsfiddle.net/s5nz4/3/. This will work in IE7, but we are all adult people here, I hope, to understand that this is inappropriate )))

解决方案

If I need IE7 support, I tend to go for the "display: inline-block with an extra element" method. This does work in IE7 with a small change, here's an example.

If I don't need IE7 support, I usually use the display: table-cell method.

Sometimes, I can't use the display: table-cell method, typically when I need to use absolutely position something at the bottom of the element with display: table-cell. position: relative doesn't work on table cells, at least in Firefox. In those cases, I use the display: inline-block method, except that the "extra element" is inserted via :before, which keeps the HTML clean.

这篇关于我们可以想到的最简单的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！