html - 如何在页面中间水平居中我的搜索栏和按钮？

Question

我已尝试为我的元素设置以下属性，"margin:0 auto;"和“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

尝试对 flex 容器使用 display: flex; 和 justify-content: center;

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