It’s a simple layout but I’m struggling to get it to work.
I have a heading with a link below and button on the right.
At smaller screen sizes I would like the button to be vertically centered against the link which it does now.
At larger screen sizes I would like the button to be centered against the heading and the link together. It does in the demo but I’m moving the button up with a negative margin.
I’m sure this must be able to done without the negative margin.
That makes no logical or practical sense from a css point of view.
You said you wanted the button vertically centred against the heading text and the links below which would assume that the text and button were separate units allowing them the space vertically to do this.
However now you say you don’t want the button vertically centred against the heading text but that you want the heading text to run full width which means that there is no longer anything that can be vertically centred or used as a basis for centring. It seems like when the text wraps you want the wrapped bit of text and the links under to define the limits of centring?
It’s hard to even define what the actual basis for the centring is now?
The button can’t be centred vertically if it has to follow wrapping text because you won’t know when the text will wrap. Indeed what would be the criteria for centring the button? i.e. Is the button centred vertically against that last piece of text that has wrapped (or hasn’t wrapped yet) and the remaining space taken up by your links that may or may not have wrapped also?
There are too many variables to consider here and the logical approach is the one in my codepen. Otherwise you are just throwing magic numbers at an impossible scenario.
Effectively when you think of vertically centering multiple elements you have to think of groups of elements in separate cells and then you can match one cell against the other etc. However you can’t have separate elements ‘automagically’ centering with whatever space is left.
Maybe if you can define the exact criteria that the centering has to follows and what happens when one or more lines of text in your heading or links (or both) have wrapped then we can work towards a solution but you are probably looking at a ‘magic number’ convoluted floated solution like this
