[Resolved] align Logo With Site Title

[Tony]

I want to align the logo and site title vertically.
This works but is there a more reliable way to do it that doesn’t depend on a px value e.g. using something like vertical-align: middle (which I can’t make work)

.site-branding {
display: inline-block;
margin: 20px 0px 0px 0px;
}

[Tom]

Hi Tony,

vertical-align: middle only works with tables or elements mimicking tables, which isn’t very reliable either.

I would go with px – you can always use media queries to tweak them if things shift at different browser sizes.

Sooner than later I’m going to make an option in the Customizer that does this that will be super reliable 🙂

[Ryan]

Hi Tom,

Can I ask when you are going to release the option in customiser to allow the logo to be aligned in the middle of the header? Right now I am using just a logo image – no text.

I’m trying to use some custom css but not working out well. text-align:center has no affect (but its ‘cheap shot css’) I was expecting margin: 0 auto; to work because the header has a defined width, but nothing is working out for me.

Not a big fan of using fixed pixels and then correcting them at breakpoints either…

• This reply was modified 8 years ago by Ryan.

[Tom]

You should be able to do this in “Customize > Layout > Header alignment”?

[Thierry]

Hello,

I need the same thing, vertical align site-branding with site-logo, it’s possible ?

Thx

[David]

Hi Thierry,

you can try flex box, something like so:

.inside-header {
    display: flex;
    align-items: center;
}
.site-branding {
    order: 1;
    margin-left: 20px;
}

[Thierry]

Great, thanks David

[David]

You’re welcome Thierry

[Thierry]

So, how i can do fix this :

(a second menu float right)

[David]

You can try this:

.secondary-navigation {
    float: none;
    order: 2;
    margin-left: auto;
}

[Thierry]

it’s work, thanks 🙂

[David]

You’re welcome!

[Author]

Posts