vertical alignment

[magician11]

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!

[jurotek]

Try this and see if it works

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

[magician11]

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.

[jurotek]

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.

[Eric Gregoire]

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.

[__]

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>.

[Paulie_D]

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

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

[magician11]

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.

[Author]

Posts