Why can't I center this form input field of type text in html using text-align: center?

Question

I am learning HTML and I am trying to implement a search bar, but it needs to be centered. I've been googling for about 4 hours, and I can't make it. I have tried a lot of tutorials, but they don't work.

In the button, CSS rule text-align: center; works, but in the search bar it doesn't. I am using Bootstrap to help style the web page. Anyway, here is my HTML code:

 #search-bar { height: 50px; width: 50%; border: 2px solid black; border-radius: 25px; }

 <form action="https://google.com/search"> <div class="form-row"> <div class="form-group col-lg-12" style="text-align: center;"> <input type="text" name="q" class="form-control" id="search-bar"> </div> </div> <div class="form-row"> <div class="form-group col-lg-12" style="text-align: center;"> <input type="submit" class="btn btn-primary" value="Google Search"> </div> </div> </form>

Answer 1

The approach I took is different. With CSS, you can add margin-left: 25% so that it will move 25% of the body of the element to the right. That way if you set the elemnt width to 50%, it will end up centered. In this case, this my css:

#search-bar {
    margin-top: 100px;
    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    border-radius: 25px;
}

Answer 2

Try This:

#search-bar { 
              display : flex;
              justify-content : center;
              align-items : center;
            }

For more details about flex-box styling: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

text-align:center; is not working due to width constraint if you are using bootstrap then you can try using 'ml-auto' and 'mr-auto'

<div class="form-group col-lg-12 mr-auto ml-auto">
  <input type="text" name="q" class="form-control" id="search-bar">
</div>

or if you wanted to use plain css then you can specify property

margin:0 auto;