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!

About the Author

Kevin Leary is a web developer in Boston, MA specializing in enterprise website design and development, online marketing, and conversion optimization.