3

GWT 開発者サイトには、ページの中央にあるパネルを示す例があります。GWT レイアウトパネルを使用して、ページの中央にパネルを固定することは可能ですか?

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

4

3 に答える 3

3

自動CSSレイアウトを使用して、固定サイズの絶対ボックスを中央に配置するための古き良きCSSトリックがあります（JavaScriptは必要ありません）：

  • 最初に を使用してボックスの左上隅を中央に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 に適用します。完全なコード例はありませんが、可能だと思います。

于 2011-04-20T21:31:34.580 に答える
0

あなたは単純な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で作成されたら、本質的にCSS制約システムであるため、LayoutPanelsを使用して再作成できます。

于 2011-04-20T02:26:38.833 に答える
0

LayoutPanel で固定幅レイヤー自体を自動的に中央揃えにすることはできないと思います。ただし、レイヤーを DOM に挿入してそのサイズを取得し、適切なオフセットを自分で計算することができます。DialogBox.center(); のコードで、Google が (LayoutPanel ではなく) これを行う方法を確認できます。

于 2011-04-20T03:58:32.453 に答える