検索ボックスを中央に合わせる

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

：

はコードを参照してください。

あなたはより親の中央に検索ボックス自体を整列する場合：

ブロックを表示autoにマージン左テキストボックス

セットにして与えることをテキストボックスを設定し

2. 余白を自動的に設定する
3. 位置を相対に設定する必要があります。

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>