时间戳

首页 > 解决方案 > 谷歌搜索框需要移动到屏幕中间（X:0 Y:0）

javascript - 谷歌搜索框需要移动到屏幕中间（X:0 Y:0）

问题描述

我正在制作一个网站以创建一个 chrome 新标签扩展，所以我需要一个搜索栏 - 我的谷歌搜索栏位于页面的左上角，我需要它在中间，有点像谷歌主页搜索栏。

我在https://w3schools.com和https://w3docs.com等网站上进行了研究，但找不到太多

这是我当前的代码：

<!DOCTYPEhtml>
<html>
  <form method="get" action="http://www.google.com/search">
    <div style="border:2px solid black;padding:16px;width:60em;">
      <table border="0" align="center" cellpadding="0">
        <tr>
          <td>
            <input type="text"   name="q" size="100" style="color:#808080;"
            maxlength="255" value="Google site search"
            onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
            <input type="submit" value="Go!" />
            <input type="hidden" name="sitesearch"/>
          </td>
        </tr>
      </table>
    </div>
  </form>
</html>

输出是搜索框（如上所述）框在角落里。

标签： javascripthtmlcss

解决方案

使用弹性盒

html,body{
width:100%;
height:100%;
}
form{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}

推荐阅读