html - Centering 2 elements inside Bootstrap column -
so if have 1 element, in case button, add .center-block class element , centered.
<div class="form-group"> <div class="col-sm-4 col-sm-offset-4"> <button type="submit" class="btn btn-primary center-block">element 1</button> </div> </div> but if have 2 elements? tried wrap them in div , added .center-div class so:
html:
<div class="form-group"> <div class="col-sm-4 col-sm-offset-4"> <div class="center-div"> <button type="submit" class="btn btn-primary">element 1</button> <button type="submit" class="btn btn-primary">element 2</button> </div> </div> </div> css:
.center-div { display: inline-block; margin-right: auto; margin-left: auto; } .center-div same .center-block except used display: inline-block; instead of display: block; fits contents size.
sadly doesn't work. unless change display: block; , assing fixed width 200px.
what missing here?
margin right , left set auto works if width of element fixed. center-div inline-block, need text-align: center property on container.
<div style="text-align: center"> <div class="center-div"> <!-- inner elements --> </div> </div> i used style attribute convenience in example
Comments
Post a Comment