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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.