My Search Bar and Search Buttons will not center properly-CodePudding

I have made my Google site and it functions the way I would like. I just can't figure out why my search input and buttons won't center properly. I figure it's something with my or CSS but I can't seem to get it to work. Any suggestions?

<!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 >
      <div >
        <a href="./advanced.html">Advanced Search</a>
        <a href="./index.html">Google Seach</a>
      </div>
    </div>    
    <div >
      <img
        src="https://sites.google.com/site/thisisjustatest2294/_/rsrc/1468742544208/project-resources/image-search/google-image-search/Screen Shot 2015-11-28 at 1.14.27 PM.png"
        alt="google img"
      />
        <div >
            <span > search </span>
            <form action="https://www.google.com/images" method="get">
              <input type="text" name="q" >
                <span > mic </span>
            <br>
            <div >
                <input type="submit" name="btnK" value="Image Search" >
                
            </div>    
        </form>
        </div>
    </body>
</html>

Here is the 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;
  }

Like I said, I can get the page to function like I want, same with the Images and Advanced Search page. It just must be something in my CSS or my HTML structure that won't let me center the buttons and the search input how I want.

CodePudding user response：

I apologize if my answer is not clear enough, I'm a newbie on here. If I understand your question, you want to center everything on the page. You can do this by adding the attribute align="center" in the body tag in the html code.

CodePudding user response：

Your <form> tag should encompass both the search input and the search buttons (the way you wrote your HTML, the search-input div is the encompassing tag). So it should look like this:

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

Now you can center the button in your css:

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

Since the HTML structure changed, you should also re-style the button:

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

Here's the result: