How do I center my search box to the middle of the page?

1

Here is my html

<div class="center">
<h1>  Brain Query</h1>
<img src="https://www.clipartsgram.com/forum/uploads/2053500467-human-brain-front-view-brain-pinterest-brain-anatomy-brain.jpg" alt="Smiley face" align="middle"><br>
  
  
<input type ="text" name="search" placeholder="Search.."/>
  </div>

Here is my CSS

.center{
margin: 0 auto;
}

I noticed that margin :auto does not work. I am using Bootstrap.

I can center it using margin-top, margin-right etc etc. Why doesn’t margin auto work? How can I move everything to the middle of the page. Any suggestion would be great. Here is a link to my codepen

All I can do is center it at the top. What I want is to center it in the middle of page.

2

add the class text-center to your div element and for this one you can remove your css

3

To center all your content give the class “text-center” to your wrapping div.

As for your question: margin: 0 auto; needs an element with a fixed width, otherwise it won’t work.

1 Like
4

@zootechdrum Add text-center class to your element :stuck_out_tongue_winking_eye:

7

Thank you.I figured it out.