Google搜索框需要移到屏幕中间(X:0 Y:0)

Question

我做一个网站是为了创建一个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>

​

输出结果是搜索框(如上所述)框在角落中。

Answer 1

你给了你的searchBar太多，让下面的变化与你给表。

style=“边框:2px纯黑；填充:16px；宽度:60em；

至

style=“边框:2px纯黑；填充:16px；宽度:45em；

运行代码片段。

​

<!DOCTYPEhtml>
<html>
  <form method="get" action="http://www.google.com/search">
    <div style="border:2px solid black;padding:16px;width:45em;">
      <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>

​

Answer 2

使用flexbox

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

Answer 3

您可以通过将margin: 0 auto放在边框div上使其居中

<div style="border:2px solid black;padding:16px;width:60em; margin: 0 auto;">

我也以这种方式居中了文本输入。展开代码段以使其居中(您的代码段在展开之前看起来居中)。

​

<!DOCTYPEhtml>
<html>
  <form method="get" action="http://www.google.com/search">
    <div style="border:2px solid black;padding:16px;width:60em; margin: 0 auto;">
      <table border="0" align="center" cellpadding="0">
        <tr>
          <td>
            <input type="text"   name="q" size="100" style="color:#808080; margin: 0 auto;"
            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>

​