[SalesForce] How to align button to right and vertical center inside a division

I want to display a text and two buttons inside a <div> in a <aura:component>. When I use the following code:

<div style="background-color:blue; margin:2px; padding:10px;" >
   <span>Page 1 of 0 </span> <span><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>

I got the result like this:
enter image description here

But, I want the buttons to align right. So I changed the code to this:

<div style="background-color:blue; margin:2px; padding:10px;" >
   <span>Page 1 of 0 </span> <span style="float: right;"><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>

But, the result I got is like this:
enter image description here

When the buttons are aligned right, they are not in vertical center of the <div>. I have used salesforce's slds-float_right class and also used vertical-align: middle. But, everything gives the same result.
So, how can I align these buttons to right while keeping them in the vertical center of the <div> ?

Best Answer

Since you used float on the button so they are taken out from the "normal" flow you can set overflow to "hidden" or "auto" in this case like this

  <div style="background-color:blue; margin:2px; padding:10px;overflow: auto;" >
   <span>Page 1 of 0 </span> <span style="float: right;"><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>
Related Topic