將搜索框對齊到中間

Question

我選擇了a good css/html code來實現網絡上的搜索框。但我無法將搜索框移到中心位置。下面的CSS代碼是關於搜索框。

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

我應該修正對準搜索框代碼？

謝謝。

Answer 1

嘗試向您的body提供text-align: center。如果要對齊在文本框中不是使用@nashcheez答案中央的文字

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

：

參考代碼。

如果你想搜索框本身對齊到父比中心：

1. 設置文本框來顯示塊
2. 提供一個與該文本框
3. 設置的空白，留給汽車
4. 將margin-right設置爲自動
5. 您可能必須將position設置爲relative。

Answer 3

，你可以嘗試使用：

#search { 
    width: 357px; 
    margin-right: auto; 
    margin-left: auto; 
} 

如果被覆蓋，嘗試使用：

#search { 
    width: 357px; 
    margin-right: auto !important; 
    margin-left: auto !important; 
} 

Answer 4

如果li#search是你要做的，試試這個：

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