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

标签 javascript html css

我正在制作一个网站以创建一个 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>

输出是搜索框(如上所述)框在 Angular 落里。

最佳答案

使用 flexbox

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

关于javascript - 谷歌搜索框需要移动到屏幕中间(X :0 Y:0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56591343/

相关文章:

php - 图像没有出现在 MYSQL 数据库中

javascript - 高分子简单元件

javascript - 发布图片的脚本

css - 使用 CSS 设置子级 <div> 的父级 <div> 宽度

javascript - Bootstrap Carousel 不工作(一次显示所有图像)

javascript - 将 MS SQL 日期转换为 JavaScript 完整日期时间增加了 3 小时

javascript - (HTML/CSS) 如何将文本对齐到中心的中间(在 x 和 y 轴上)?

java - 通过打印服务器打印动态生成的服务器端 HTML

Javascript RegExp ' * ' 未按预期工作

javascript - jQuery - 使用同时填充的另一个输入字段的值更改输入字段的名称