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 回答