Question

我正试图创建一个类似于谷歌主页的网页。该系统将有一个中央定位输入箱和一个显示链接的顶点。我也希望,如果我改变浏览器窗户的规模,该页就会充满活力。我已经利用 y2电网和一张桌子取得了部分成功。这里指:

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

唯一的问题是,该网页在转播浏览器窗户时没有动态地转播。是否有更好的办法这样做?

Answer 1

你们可以 use笑,完美地把它定下来。

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  */
}

jQuery

CSS

友情链接