Aligning search box to center - html

Question

I picked a good css/html code for implementation of search box on the web. But I can't move the search box to center. The below css code is about search box.
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>
What should I fix the code for aligning the search box?
Thanks.

Answer 1

Try providing text-align: center to your body.
Refer code:
body {
text-align: center;
}
#search {
width: 357px;
margin: 4px auto;
text-align: center;
display: inline-block;
}
#search_text {
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search" />
<input type="button" name="search_button" id="search_button" />
</form>
</li>

Answer 2

If you want to align the text in the center of the textbox than use #nashcheez answer.
If you want to align the searchbox itself to the center of the parent than:
Set the textbox to display block
Give a with to the textbox
Set margin-left to auto
Set margin-right to auto
You may have to set position to relative.

Answer 3

you can try to use:
#search {
width: 357px;
margin-right: auto;
margin-left: auto;
}
if its being overridden, try using:
#search {
width: 357px;
margin-right: auto !important;
margin-left: auto !important;
}

Answer 4

If li#search is all you've got, try this:
#search {
width: 357px;
margin: 4px auto;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>