Menu
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?
701
Simply make #search have a width: 100%; , and also have a property of text-align; center; . The #search input[type='text'] box should then be centered, along with the rest of the child elements inside of #search .
To just center the text inside an element, use text-align: center; This text is centered.
You can add margin-left: auto by adding mr-auto to navbar to center the searchbar in the navbar.
Centering a block or image The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width. Here is an example: P.blocktext { margin-left: auto; margin-right: auto; width: 8em } ...
You can change your display from inline-block to block:
#search {
margin: 0 auto;
display: block;
}
http://plnkr.co/edit/QGJ2dcqHWNZrCRDbYXtw?p=preview
155
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>
.box{
display: block;
margin: 0 auto;
width:150px; /* Set this based on the size of the text box you are using */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
