CODEWITHSUNDEEP
javascripthtmlcss
Maayan Orr
Maayan Orr

Reputation: 31

Google search box needs to be moved to the middle of the screen (X:0 Y:0)

I am making a website in order to create a chrome new-tab extension, so to make that I need a search bar - My google search bar is in the top left corner of the page and I need it in the middle, sort of like the google home page search bar.

I have researched on websites such as https://w3schools.com and https://w3docs.com and could not find much

this is my current code:

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

the output is that the search box (as stated above) the box is in the corner.

Upvotes: 3

Views: 1366

Answers (6)

Jatin parmar
Jatin parmar

Reputation: 444

You give too much with to your searchBar make the bellow change to with you given to Table.

style="border:2px solid black;padding:16px;width:60em;

To

style="border:2px solid black;padding:16px;width:45em;

Run the code snippet.

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

Upvotes: 1

ClarkeFL
ClarkeFL

Reputation: 129

So you can add the following to your <div>:

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

45vh is not the best solution as you don't get the absolute middle of page.

Here is a better solution:

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

Upvotes: 0

Yogesh Bhalerao
Yogesh Bhalerao

Reputation: 1

Media query can help you for lower width

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

Upvotes: -1

Bman70
Bman70

Reputation: 773

You can center it by putting margin: 0 auto on the border div:

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

I also centered the text input that way. Expand the snippet to see it centered (your snippet looks centered until it's expanded). 

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

Upvotes: 0

mohammad fallahpoor
mohammad fallahpoor

Reputation: 58

use flexbox

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

Upvotes: 1

Cray
Cray

Reputation: 2850

If you want to center it horizontally and vertically you could use following css on your div that surrounds table. NB! You need to use position: absolute; to center vertically with these styles. For horizontal left: 0; right: 0; is used because the position is absolute and if you were to use relative position those would not be needed.

Center vertically:

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

Center horizontally:

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>

Upvotes: 0

Related Questions