Keeping content within div(s) vertically centred

[grimski]

The content I refer to is in the header of an application I’m working on. You can see the basic layout in the CodePen below:

http://codepen.io/moy/pen/QEOYjA

Now you’ll notice that if the paragraph within .user is removed the ‘title’ is vertically centred – great! The problem occurs when I remove the logo (which isn’t required on every page. I’ve tried setting a height on .user and also .user__wrap but the title will never vertically centre.

Ideally I’d want the navigation to always center as well but as they’re floated left/right respectively I know vertical-align won’t work. That said Flexbox isn’t an option either due to the browsers I need to support.

Anyone have any ideas? I think it would be acceptable to put heights on the .site-nav and .user divs if needed as the logo size will need to be restricted (as it’s uploaded by the user). I don’t think there’s any other way of achieving this?

[Beverleyh]

Maybe get rid of the floats on .user and .site-nav and turn them into table-cells (display:table-cell;) where you can then successfully apply vertical-align:middle;

.wrap will become a table with display:table;

http://codepen.io/anon/pen/qNVgoN

[grimski]

Thanks @Beverleyh I think that’s a good approach! I actually ended up giving the navigation a height too as I wanted the hover effect to be the height of the bar :)

[Author]

Posts