How to align button to right and vertical center inside a division?

Question

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:

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:

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> ?

Answer 1

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>