为什么边界的自动属性不能垂直工作而水平工作？

我已经看到，虽然开发网站，垂直居中容器（固定高度）在一个随机高度的容器内总是作为web开发人员（至少，我）的噩梦，而当涉及到水平居中一个容器在一个随机宽度的容器内，margin:0px auto;倾向于在标准模型中提供一个简单的方法。

当事情可以这么简单时，为什么CSS在解决高度固定的容器内的固定高度的容器时，不能用margin:auto 0px;？有没有特别的理由这样做？提前感谢您的见解。为什么边界的自动属性不能垂直工作而水平工作？

来源

2011-12-23 ikartik90

http://phrogz.net/css/vertical-align/index.html提供了一些见解：“HTML布局传统上不用于指定垂直行为。就其性质而言，它在横向上缩放，并且内容根据可用宽度流到适当的高度。传统上，横向尺寸和布局很容易; “ – justis 2011-12-23 20:12:11

是真的，但我仍然有一种直觉，它可能会有很大的提升，它只是感觉很尴尬，你不能使用vertical-align：middle，除非容器显示为table-单元格 – ptriek 2011-12-23 20:19:26

@jblasco：我已经阅读过您提到过的页面，但似乎我没有找到满意的答案。原因：HTML在传统上只是用来显示/分享在CERN设计的简单文本数据，但那么当你将传统的HTML和HTML5进行比较时，就会发生如此多的变化，那么现在是不是适应什么促进访问便利性的时候了？ – ikartik90 2011-12-23 20:19:40

这实际上比你想象的更噩梦，只是不使用利润率。 vertical-align真的是你应该依靠流体高度垂直居中。我扔一起快速演示来证明我的观点：

HTML：

<span></span><div id="any-height"></div>

CSS：

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; }

参见：http://jsfiddle.net/Wexcode/jLXMS/

来源

2011-12-23 21:06:26 Wex

好的，你确实有一点。垂直对齐不一定是噩梦，IE7是IE6。 – ptriek 2011-12-23 21:27:33

我已经使用了垂直对齐方式，但在大多数地方不能提供令人满意的解决方案。原因：vertical-align的问题在于它与所有浏览器都不兼容。有关参考[检查此链接]（http://reference.sitepoint.com/css/vertical-align#compatibilitysection）。所以没有分家伙。 :( – ikartik90 2011-12-24 05:37:07

[有些工具可以验证其他浏览器是否有效]（https://browserlab.adobe.com/en-us/index.html），因此您不必依赖图表随心所欲地将事物标记为越野车......我确信这适用于所有主流浏览器，并且如果您正在寻找扩展兼容性，您应该检查[本文]（http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block /） – Wex 2011-12-24 18:42:40

你的问题的正确答案是margin: auto 0没有按工作原理与margin: 0 auto工作原理相同，因为width: auto工作方式不一样height: auto ES。

垂直自动边距对已知高度的绝对定位元素起作用。

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
}

来源

2013-11-08 13:59:48 user1602599

CSS ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
}

HTML ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

note ----------- 这个css类几乎可以与所有的浏览器一起工作

来源

2014-01-26 11:11:01 Mok

为什么边界的自动属性不能垂直工作而水平工作？

回答

相关问题