使用布局面板系统在 GWT 中将面板居中答案

【问题标题】：Centering a panel in GWT using the layoutpanel system使用布局面板系统在 GWT 中将面板居中
【发布时间】：2011-04-19 19:47:52
【问题描述】：

在 GWT 开发人员网站上，有一个示例显示了位于页面中间的面板。是否可以使用 GWT 布局面板在页面中间设置固定面板？

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

【问题讨论】：

标签： gwt layout layoutpanels

【解决方案1】：

有一个很好的旧 CSS 技巧，可以使用自动 CSS 布局（无需 JavaScript）将 fixed-size、absolute 框居中：

首先使用top: 50%; left: 50%;将框的左上角居中
当然，该框现在离底部/右侧太远了。
然后使用边距减去框的高度/宽度的一半。（它是固定大小的，所以你可以用笔和纸计算“高度/宽度的一半”:-)

例子：

<!doctype html>

<html>
<head>

<style type="text/css">
    .box {
        position: absolute;
        background-color: red;
        height: 300px;       width: 400px;  /* Using "px" here, but you */
                                            /* can also use "em" etc.   */
        top: 50%;            left: 50%;
        margin-top: -150px;  margin-left: -200px;
    }
</style>

</head>

<body>
    <div class="box">Box</div>
</body>
</html>

将此样式应用于您的 LayoutPanel - 我没有完整的代码示例，但我认为应该可以。

【讨论】：

LayoutPanel 为实现 NeedsResize 接口的子面板提供了 onResize() 事件。如果各种面板尺寸可能发生变化，您可以使用此挂钩。

【解决方案2】：

你可以用简单的css来实现效果。例如：

<html><head>
<style>
.outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
}

.inner {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>

使用绝对定位的对象在纯 CSS 中创建基本效果后，您可以使用 LayoutPanel 重新创建它，因为它们本质上是一个 CSS 约束系统。

【讨论】：

这不会创建一个固定宽度的内部div~
fixed-percentage 框的良好解决方案。 fixed-size 的解决方案有点不同，但是用简单的 css 还是可以的！

【解决方案3】：

我不认为您可以在 LayoutPanel 中自动使固定宽度的图层居中。但是，您可以将图层插入 DOM 以获取其大小，然后自己计算适当的偏移量。您可以在 DialogBox.center() 的代码中看到 Google 是如何做到这一点的（而不是在 LayoutPanel 中）；

【讨论】：