CODEWITHSUNDEEP
htmlcss
mufc
mufc

Reputation: 715

center search bar with css

I have the following code. I have a search that I want to center in the page. But for some reason it is not working.
Search 

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

I also have the following css

.box{
    width: 100%;
}

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

I have read numerous posts about this, and all of them to do margin: 0 auto; but that just isn't working. Is there something I am missing here?

Upvotes: 6

Views: 53213

Answers (4)

Dave Taitelbaum
Dave Taitelbaum

Reputation: 71

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

Upvotes: 2

IE5Master
IE5Master

Reputation: 413

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

See the fiddle: https://jsfiddle.net/24d153gb/

Upvotes: 0

jonasnas
jonasnas

Reputation: 3580

You can change your display from inline-block to block:

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

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

Upvotes: 3

nicael
nicael

Reputation: 18995

Just center anything inside the box, so as the search field also gets centered.

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

Upvotes: 2

Related Questions