I have three HTML objects and want to arrange Previous button at the left side, Next button at right side and span in the middle inside a container div.
<PREVIOUS> |SPAN| <NEXT>
#btnPrevious { float:left; } #spanStage { font-weight:bold; vertical-align:middle; } #btnNext { float:right; }
<div> <input type="button" value="Previous" id="btnPrevious"/> <span id="spanStage">Stage 5</span> <input type="button" value="Next" id="btnNext"/> </div>
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Using float and margin The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
The "display:flex" style is a good way to make these elements in same line. No matter what kind of element in the div. Especially if the input class is form-control,other solutions like bootstrap, inline-block will not work well.
Example:
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> <input type="button" value="Previous" id="btnPrevious"/> <span id="spanStage">Stage 5</span> <input type="button" value="Next" id="btnNext"/> </div>
More detail about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-direction: row, column
justify-content: flex-end, center, space-between, space-around
align-items: stretch, flex-start, flex-end, center
Just add text-align: center
to your wrapper to set the horizontal alignment of all non-floating/non-positioned children:
div{ text-align:center; }
<span>
are inline elements by default. Thus you either have to use display:block
on them and style them appropriately, or just tweak the parent style a little bit. Since there are no other children than the <span>
and the <button>
s your best of with this simple solution.
Note that text-align:<value>
gets inherited from the parent, so if you want to include something else in your wrapper you should check whether text-align:center
is okay for you. Otherwise use text-align:<value>
in the specific element, where value
is left
, right
, center
or justify
.
JSFiddle Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With