My Search Bar and Search Buttons will not center properly

user_19564280 0
Viewed 25

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 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>

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.

center button search css html
2 Answers

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.

user_195181300

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 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>

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: Result

user_10717560
Related