Question

我有以下代码。我有一个搜索，我想在页面中居中。但由于某种原因，它无法正常工作搜索

    <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;，但这些内容并不起作用。我在这里缺少什么吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Answer 3

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

Answer 4

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

请参阅小提琴：https://jsfiddle.net/24d153gb/

中心搜索栏与CSS

4 个答案: