使用css居中搜索栏

我有以下代码。我有一个搜索，我想在页面的中心。但由于某种原因，它不起作用
搜索

    <body>
        <div>
            <h1>ADD BUTTON HERE</h1>
        </div>
        <div class="box">
             <input type="search" id="search" placeholder="Search" />
        </div>
        <hr>
    </body>
<html>

我还有下面的css

.box{
    width: 100%;
}
#search {
    margin: 0 auto;
    display: inline-block;
}

我读过很多关于这方面的帖子，所有这些帖子都是为了做margin: 0 auto;，但这根本不起作用。我这里缺了什么吗？

您可以将显示从inline-block更改为block:

#search {
    margin: 0 auto;
    display: block;
}

http://plnkr.co/edit/QGJ2dcqHWNZrCRDbYXtw?p=preview

只需将框内的任何内容居中即可，这样搜索字段也会居中。

.box{
    width: 100%;
    text-align:center;
}

<div>
    <h1>ADD BUTTON HERE</h1>
</div>
<div class="box">
    <input type="search" id="search" placeholder="Search" />
</div>
<hr>

.box{
    display: block;
    margin: 0 auto;
    width:150px; /* Set this based on the size of the text box you are using */
}

.box{
    margin-right:auto;
    margin-left:auto;
    width:100px; /* Set this property to whatever you like */
}

看小提琴：https://jsfiddle.net/24d153gb/

相关内容

最新更新

热门标签：