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

尝试将display: flex;和justify-content: center;用于Flex容器

  #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

试试这个浏览器的所有支持，移动设备没有问题。

＆＃13;

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

＆＃13;

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

＆＃13;

如何将搜索栏和按钮水平放置在页面中间？

2 个答案: