文章/答案/技术大牛

发布

社区首页 >问答首页 >我的搜索栏和搜索按钮将无法正确地居中。

问我的搜索栏和搜索按钮将无法正确地居中。
EN

Stack Overflow用户

提问于 2022-07-17 22:34:17

回答 2查看 30关注 0票数 1

我已经做了我的谷歌网站，它的功能，我想。我只是不明白为什么我的搜索输入和按钮不能正确地居中。我认为这是我的或CSS的东西，但我似乎无法使它工作。有什么建议吗？

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>Images</title>
  </head>
  <body>
    <div class="header">
      <div class="header-right">
        <a href="./advanced.html">Advanced Search</a>
        <a href="./index.html">Google Seach</a>
      </div>
    </div>    
    <div class="mainBody">
      <img
        src="https://sites.google.com/site/thisisjustatest2294/_/rsrc/1468742544208/project-resources/image-search/google-image-search/Screen%20Shot%202015-11-28%20at%201.14.27%20PM.png"
        alt="google img"
      />
        <div class="search-input">
            <span class="material-icons"> search </span>
            <form action="https://www.google.com/images" method="get">
              <input type="text" name="q" class="box">
                <span class="material-icons"> mic </span>
            <br>
            <div class="search-buttons">
                <input type="submit" name="btnK" value="Image Search" class="button">
                
            </div>    
        </form>
        </div>
    </body>
</html>

这是CSS

* {
    margin: 0;
  }
  
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* Start CSS for Header Section */
  
  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    align-items: center;
  }
  
  .header a {
    margin-left: auto;
    margin-right: 20px;
    text-decoration: inherit;
    color: rgba(0, 0, 0, 0.87);
    font-size: 15px;
  }
  
  .header a:hover {
    text-decoration: underline;
  }
  
  .header .header-right {
    display: flex;
    margin-left: auto;
    min-width: 13vw;

  }

  /* Start CSS for Main Body */
  
  .mainBody {
    flex: 1;
    display: flex;
    margin-top: 12%;
    flex-direction: column;
  }
  
  .mainBody img {
    object-fit: contain;
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .search-input {
    display: flex;
    border: 1px solid lightgray;
    height: 30px;
    padding: 10px 20px;
    border-radius: 999px;
    width: 100vw;
    margin: 0 auto;
    
    max-width: 500px;
  }
  
  .search-input input {
    flex: 100%;
    padding: 10px 20px;
    border: none;
    outline: none;
    position: relative;

  }

  .material-icons {
    margin-right: auto;
    align-items: center;
    width: 50px;
  }
  
  .search-input .material-icons {
    color: gray;
    
  }
  
  .search-buttons {
    padding: 20px 30px;
  }

就像我说的，我可以让页面像我想要的那样工作，图片和高级搜索页面也是如此。它一定是我的CSS或HTML结构中的东西，不会让我按我想要的方式对按钮和搜索输入进行居中。

html

css

button

center

回答 2

Stack Overflow用户

发布于 2022-07-17 23:21:12

如果我的回答不够清楚，我很抱歉，我是这里的新手。如果我理解你的问题，你想把所有的东西都集中在这页上。您可以通过在html代码中的body标记中添加属性align="center“来做到这一点。

票数 0

Stack Overflow用户

发布于 2022-07-18 20:38:26

您的<form>标记应该包含搜索输入和搜索按钮(您编写search-input的方式，search-input div是包含标记)。所以应该是这样的：

<form action="https://www.google.com/images" method="get">
  <div class="search-input">
    <span class="material-icons"> search </span>
    <input type="text" name="q" class="box">
    <span class="material-icons"> mic </span>
    <br>
  </div>
  <div class="search-buttons">
    <input type="submit" name="btnK" value="Image Search" class="button">
  </div>
</form>

现在，您可以在css中将按钮居中：

.search-buttons {
  text-align: center;
}

由于HTML结构发生了变化，您还应该重新设置按钮的样式：

.search-buttons input {
  padding: 10px 20px;
  border: none;
  outline: none;
}

结果如下：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73015804

复制

相似问题

问我的搜索栏和搜索按钮将无法正确地居中。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的搜索栏和搜索按钮将无法正确地居中。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的搜索栏和搜索按钮将无法正确地居中。
EN