検索バーとボタンをページの中央に水平に配置するにはどうすればよいですか？

Question

次のプロパティを要素「margin：0 auoto;」に設定しようとしました。と "text-align：center;"は、しかし、どれもうまくいかないようです。

<div id="searchBarWrap"> 
     <input id="searchBar" type="text" name="searchbar" placeholder="Search & Explore..."/> 
     <button id="searchBtn"><i class="fa fa-search"></i></button> 
    </div> 

    #searchBarWrap{ 
     display:inline-flex; 
    } 


    #searchBar{ 
     border:#BA4A00 solid; 
     border-width: .2em; 
     border-radius: .7em 0 0 .7em; 
     padding: .2em .2em .2em .5em; 
     width: 225px; 
    } 

    #searchBtn{ 
     border:#BA4A00 solid; 
     border-width: .2em; 
     border-radius: 0 .7em .7em 0; 
     background-color: #BA4A00; 
     color:white; 
     font-weight:bold; 
     padding-bottom: .2em; 

    } 

Answer 1

、それはすべてのブラウザのサポートとモバイルで無問題だこれを試してみてくださいフレックスコンテナ

#searchBarWrap{ 
      display: flex; 
     justify-content: center; 
    } 

#searchBarWrap{ 
 
      display: flex; 
 
     justify-content: center; 
 
    } 
 

 

 
    #searchBar{ 
 
     border:#BA4A00 solid; 
 
     border-width: .2em; 
 
     border-radius: .7em 0 0 .7em; 
 
     padding: .2em .2em .2em .5em; 
 
     width: 225px; 
 
    } 
 

 
    #searchBtn{ 
 
     border:#BA4A00 solid; 
 
     border-width: .2em; 
 
     border-radius: 0 .7em .7em 0; 
 
     background-color: #BA4A00; 
 
     color:white; 
 
     font-weight:bold; 
 
     padding-bottom: .2em; 
 

 
    }

<div id="searchBarWrap"> 
 
     <input id="searchBar" type="text" name="searchbar" placeholder="Search & Explore..."/> 
 
     <button id="searchBtn"><i class="fa fa-search"></i></button> 
 
    </div>

Answer 2

ためdisplay: flex;とjustify-content: center;を使用してみてください。

#searchBarWrap {width:100%; height:auto; margin:0px; padding:0px; float:left; text-align:center; } 
 
#searchBarWrap span{ border:1px solid #ddd; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; 
 
display:inline-block;} 
 
#searchBarWrap input {margin:0px; padding:5px 10px; font-size:14px; text-align:center; color:#333; display:inline-block; text-align:center; border:none; background:none; float:left;} 
 
#searchBarWrap button {margin:0px; float:left; padding:14px; 10px; display:inline; background:#333; font-size:14px; text-align:center; color:#fff; border:none;border-radius:0px 5px 5px 0px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="searchBarWrap"> 
 
\t <span> 
 
    \t <input id="searchBar" type="text" name="searchbar" placeholder="Search & Explore..."/> 
 
    \t <button id="searchBtn"><i class="fa fa-search"></i></button> 
 
    </span> 
 
</div>