Question

我正在制作一个网站，以便创建chrome新标签扩展程序，因此，我需要一个搜索栏-我的google搜索栏位于页面的左上角，而我的搜索栏位于中间，有点像Google主页搜索栏。

我在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的投入过多，使您对Table的投入大为改观。

style =“ border：2px纯黑色；填充：16px；宽度：60em;

收件人

style =“ border：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>

Answer 4

如果要将其水平和垂直居中，可以在div周围的table上使用以下css。注意！您需要使用position: absolute;将这些样式垂直居中。对于水平left: 0; right: 0;，因为位置是绝对的，所以如果使用相对位置，则不需要。

垂直居中：

position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

水平居中：

left: 0;
right: 0;
margin: 0 auto;

.center {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

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

因此您可以将以下内容添加到您的<div>：

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

45vh并不是最佳解决方案，因为您无法获得页面的绝对中间位置。

这是一个更好的解决方案：

<div class="center-div"></div>

<style>
    .center-div
    {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
</style>

 

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

媒体查询可以帮助您减小宽度

@media (min-width: 1020px)
.width-container {
    margin: 0 auto;
}

<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">

    <div style="border:2px solid black;padding:16px;width:60em;" class="width-container">
        <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>

Google搜索框需要移到屏幕中间（X：0 Y：0）

6 个答案: