How to center input-group inside a div?

Issue

I want to center the .input-group inside a <div>. When I use the class center-block, the <span> takes the full width and pushes down the input field below it. I want to center them together.

 <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
     <div class="input-group input-group-lg inv-amount-block">
         <span class="input-group-addon" id="inv-rs">Rs</span>
         <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
     </div>
 </div>

I want to center them together like how they are by default.

Here is the fiddle

Solution

Just change the display property in the CSS for the .center-block

Edited: Difference between display: block and display: table is that - . display: block - will extend to 100% of the available space, while display: table - will only be as wide as its contents.

So in the latter case your span and input field would only be as wide as its content and won't take up the entire 40% width that is specified.

.center-block {
    display: table;  /* Instead of display:block */
    margin-left: auto;
    margin-right: auto;
}

              <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

                <div class="input-group input-group-lg inv-amount-block center-block ">
                  <span class="input-group-addon " id="inv-rs">Rs</span>
                  <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
                </div>
               
              </div><br>
              
                            <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

                <div class="input-group input-group-lg inv-amount-block ">
                  <span class="input-group-addon " id="inv-rs">Rs</span>
                  <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
                </div>
               
              </div>
              

Answered By - Chaitali