I just can't get the button with class align-right
to vertically align in the middle.
HTML:
<div class="panel-footer">
<span style="width:100%;" class="header-footer-item">
<button class="align-right" type="button">Save</button>
</span>
</div>
CSS:
.panel-footer {
height: 70px;
vertical-align: middle;
border: solid;
}
.header-footer-item {
display: inline-block;
line-height: 70px;
border: solid red;
}
.align-right {
float: right;
}
.align-middle {
vertical-align: middle;
}
Here's the jsfiddle: https://jsfiddle.net/d1vrqkn9/2/
If I remove float:right
from the button, it works, but I want it on the right.
If I change header-footer-item
from inline-block
to inline
then the floated button renders above its containing element, which I thought was against the rules: (#4 in the accepted answer here How to vertically middle-align floating elements of unknown heights?) - although the parent element is then vertically aligned in the middle.
I have added line heights as per CSS Vertical align does not work with float
The big question is - how do I fix it? I'm also interested to know why making a child element (the button) float right makes the parent element (the span) no longer vertically align in the containing div (but only if it is inline-block
, not inline
). ...and finally, isn't it 'against the rules' (https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) for a floating box's outer top to be higher than the top of its containing block? ...which it clearly is if header-footer-item
is inline
.
There are so many questions about vertically aligning things you'd think they'd make a css for "Seriously, vertically align this thing - no matter what, no complaints, just do it: sudo force vertical-align:middle !important or I'm coming for you
"