1

Google のホームページに似たページを作成しようとしています。中央に入力ボックスを配置し、リンクを表示するページの上部に div を配置します。また、ブラウザ ウィンドウのサイズを変更すると、ページのサイズが動的に変更されるようにしたいと考えています。yui2 グリッド css とテーブルを使用して部分的な成功を収めました。ここにスニペットがあります：

<body>
  <div id="doc3">
    <div id="hd"><a style="float:left" href="link1.com"> link1</div> 
    <div id="bd" style="display: table; height: 400px;">
      <div style="display: display: table-cell; vertical-align: middle">
        <input name="searchbox" value="searchinput" size="40" />
        <input name="submit" type="submit" value="search />
      </div>
    </div> 
  </div>
</body>

この html の唯一の問題は、ブラウザ ウィンドウのサイズを変更してもページが動的にサイズ変更されないことです。これを行うより良い方法はありますか？

4

1 に答える 1

3

jQueryを使用して完全に設定できます。

jQuery

$(window).resize(function() {
    var wh = (($(window).height()-$('#center').height())/2)+'px';
    var ww = (($(window).width()-$('#center').width())/2)+'px';
    $('#center').css({
        top: wh,
        left: ww
    });
}).resize();

CSS

#center {
    border: 1px solid black;
    position: absolute;
    width: 50px;
}​

完全に垂直方向の中央揃えを気にしない場合は、次のようにすることができます。

#center {
    border: 1px solid black;
    margin: 0 auto;
    position: relative;
    width: 50px;
    top: 45%; /* or whatever % looks 'right' */
}​
于 2010-09-13T18:37:33.480 に答える