CSS Vertical-align &  Inline-block

During the process of working today I came across a CSS issue with vertical-align and two inline-block elements next to each other.

Setting vertical-align to baseline for both didn’t solve the issue, but after a little digging I discovered that middle did solve the issue:

.menu-utility-container {
    display:inline-block;
    vertical-align:middle;
}
.search-form {
    display:inline-block;
    vertical-align:middle;
}

Hopefully this may help others out there!

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.