The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Keeping content within div(s) vertically centred

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #243581

    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:

    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?


    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;


    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 :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.