2

我正在做一个项目，我有一个固定栏（成为导航栏），然后在它的正下方是一个设置的矩形，以便当您单击它时，它会翻转。nav和flipping div的宽度应该是完全相同的，在FF、Chrome、Safari、IE中查看时它们是一样的……但是当我刚刚在Android浏览器中查看时，flipping div大约是宽度比导航栏小 10 像素。我将其范围缩小到我在 div 'outerContainer' 中使用 'display: table' 来垂直和水平居中 'innerContainer' 的内容（设置为 display: table-cell）。这是我当前如何设置的示例，它在所有浏览器中都能正确显示，但在 Android 浏览器中翻转框的宽度较小： http：

一旦我从 .outerContainer 中删除“显示：表”，它就会以适当的宽度显示在 Android 浏览器中，但是内容不再像我想要的那样居中。此示例显示了显示：删除的表格将显示正确的宽度，但内容未按我的意愿居中：http: //jsfiddle.net/adRP4/10/

我使用的垂直/水平居中方法基于：http ://www.andy-howard.com/verticalAndHorizo​​ntalAlignment/index.html （类似于http://css-tricks.com/vertically-center-multi-lined- text/ ) ...当我尝试将其更改为她概述的方法时： http: //css-tricks.com/centering-in-the-unknown/我遇到了各种问题...

对于如何解决这个问题，有任何的建议吗？

更新（6/28） ——我发现当我检查 iPhone 时，我的宽度不匹配与 Android 浏览器中的完全相同。

谢谢，马克

4

1 回答 1

0

我建议使用 DIV 进行翻转，然后添加一个填充翻转的 div 并设置为 TABLE。

或者我建议在这里使用方法 3 中的浮动：http: //blog.themeforest.net/tutorials/vertical-centering-with-css/

于 2012-07-04T05:05:00.047 回答