All geek questions in one place

Css search center

I have the following code. I have a search that I want to focus on the page. But for some reason it does not work. 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 read a lot of posts about this and they all do margin: 0 auto;, but it just doesn't work. Is something missing here?

+4
source share
4 answers

Just center something inside the box, as the search box is also 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>
Run codeHide result
+2
source

You can change the display from inline-blockto block:

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

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

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

: https://jsfiddle.net/24d153gb/

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

Source: https://habr.com/ru/post/1620816/

More articles:


All Articles