Forums

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

Home Forums CSS vertical alignment

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #149536
    magician11
    Participant

    Hi guys,

    On this page

    http://dev.jennifermartin.com.au/services/counselling-and-coaching/

    in the header there is an image for the logo on the left, and some text on the right of the header.

    If I inspect the code the “avada-row” class which is a child node of the header tag, I can see that the logo is aligned to the top of that row, whilst the text on the right is in the middle.

    I’m not sure how to get the logo to be centered vertically.

    I could set the logo to have a margin-top: 8px and it’ll be about right.. but I want to know how to get it center without having to work out the exact pixels??

    thanks!

    #149546
    jurotek
    Participant

    Try this and see if it works

    #header .logo {
    height: 55px;
    display:table-cell;
    vertical-align:middle;
    }
    #header .logo img { 
    display: block; 
    margin: auto ; 
    }
    
    #149547
    magician11
    Participant

    Hi @jurotek,

    Just tried that.. it didn’t seem to do anything. that CSS code is live for you to tweak with if you like.

    #149557
    jurotek
    Participant

    Man I am at loss here. All I can think of now, that the last resort I would try to remove top margin on H1 “your life stylist” and then adjust header top and bottom padding to make them both look vertically align in center.

    #149560
    Eric Gregoire
    Participant

    To your image logo element, add a

    padding: 11px 0;

    That just bumps the presence of the logo image up to the height of the stuff that it’s inside of.

    #149571
    __
    Participant

    Out of curiosity, why is that an image at all? it’s just text…?

    Two examples:

    — using your existing HTML markup

    — using an alternative (cleaner) markup

    Basically, these both do the same thing: center horizontally using text-align; center vertically by using padding/margin; then take the <h1> out of the flow by giving it an absolute position. This works very well “as-is,” but won’t work the same way if you add more elements to the <header>.

    #149579
    Paulie_D
    Member

    …and an even more stripped down version where the logo is auto-centered regardless of viewport width.

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

    #149713
    magician11
    Participant

    Thanks everyone. @Eric your solution seems to be the quickest fix.

    @traq
    it’s a logo as that is the only option in the WordPress theme options for it. I could create a child theme and edit the PHP to insert just text.. I might still do that to make use of the Google webfonts.

    I’ve emailed the developer of the theme too and I’ll see what he says.
    thanks.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.