使用layoutpanel系统在GWT中对中面板在GWT开发者站点上有一个例子，显示了页面中间的一个面板。使用GWT LayOutsPanel（），这是否可能在页面中间有一个固定的面板？_Gwt_Layout_Layoutpanels

使用layoutpanel系统在GWT中对中面板在GWT开发者站点上有一个例子，显示了页面中间的一个面板。使用GWT LayOutsPanel（），这是否可能在页面中间有一个固定的面板？

gwt layout

使用layoutpanel系统在GWT中对中面板在GWT开发者站点上有一个例子，显示了页面中间的一个面板。使用GWT LayOutsPanel（），这是否可能在页面中间有一个固定的面板？,gwt,layout,layoutpanels,Gwt,Layout,Layoutpanels,您可以通过简单的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%;

您可以通过简单的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>


.外部{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景颜色：蓝色；
}
.内部{
位置：绝对位置；
最高：25%；
右：25%；
底部：25%；
左：25%；
背景色：红色；
}

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

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

有一个很好的老CSS技巧，可以使用自动CSS布局（无需JavaScript）将固定大小的绝对框居中：

首先使用

top:50%将方框左上角居中；左：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>


.盒子{
位置：绝对位置；
背景色：红色；
高度：300px；宽度：400px；/*此处使用“px”，但您*/
/*也可以使用“em”等*/
顶部：50%；左侧：50%；
顶部边缘：-150px；左侧边缘：-200px；
}
盒子

将此样式应用于布局面板-我没有完整的代码示例，但我认为这应该是可能的。
这并不能为固定百分比框创建固定宽度的内部div~很好的解决方案。固定大小的解决方案有点不同，但使用简单的css仍然可以！LayoutPanel为实现NeedsResize接口的子面板提供onResize（）事件。如果各种面板尺寸可能发生变化，则可以使用此挂钩。