How to vertically align a form and image

Question

I'm struggling with the html markup and css required for putting a navbar inline with my logo. Here is what I have (needs to be viewed widescreen):

http://jsfiddle.net/ewz5r7k6/3/embedded/result/

HTML

<header>
    <nav class="container"> <a href="index.html"><img src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400"></a>

        <form class="search">
            <input type="text" class="input text" placeholder="Keyword">
            <input type="text" class="input text" placeholder="Location">
            <input type="submit" class="btn submit">
        </form>
    </nav>
</header>

CSS

html, body {
    height: 100%;
}
a {
    text-decoration: none;
}
.container {
    padding-left: 40px;
    padding-right: 40px;
}
header {
    padding-top: 30px;
    padding-bottom: 30px;
}
header nav {
    height: 50px;
    line-height: 50px;
}
header ul {
    float: right;
}
header ul li {
    display: inline-block;
}
header ul li a {
    color: rgb(58, 64, 70);
    display: block;
    font-family:'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif;
    font-size: 13px;
    height: 21px;
    line-height: 21px;
    margin-left: 25px;
    text-decoration: none;
    padding-left:15px;
    padding-right:15px;
}
header ul li a.active {
    color: #f16162;
}
header img {
    height: 50px;
}
.input {
    margin:0;
    padding: 10px 12px;
    font-weight: 300;
    border-radius: 3px;
    box-sizing: border-box;
    vertical-align:middle;
}
.search {
    display: inline-block;
}
.search .text {
    width: 300px;
    margin-right: 30px;
    ;
}
.search .submit {
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    height: 38px;
    width: 60px;
    vertical-align:middle;
}
.btn {
    border-radius: 3px;
    background-color: black;
    color: #fff;
    border: 0;
    text-decoration: none;
}
.right {
    float:right;
}

1. Is the cleanest, most semantic way of achieving this layout, by using display:inline-block; for the form? It seems I could possibly float everything to the left, im not sure what is the best approach.

2. How should be I vertically centering the form within the navbar, is line-height the correct markup for that, or is there a better way?

Answer 1

There is no "best" way to place elements side by side. It totally depends on the situation, but inline-block and float: left are both viable options. For convenience sake, I usually stick with inline-blocks until I really need to float. Floats have the tendency to require additional rules to prevent side effects, like having to clear them or fixing overflow issues.

Vertically centering when using inline-block is usually done with vertical-align, although that too depends a lot on the situation. Vertical alignment is one of the most annoying things in CSS if you ask me. For your example however it turned out to be quite simple:

.search {
    display: inline-block;
    vertical-align: top;
}

Is enough to make the form align with the logo.

Answer 2

Just setting the img tag to align vertically middle will solve the problem

img
{
vertical-align:middle;
}

See DEMO

see these links for better understanding : float:left; vs display:inline; vs display:inline-block; vs display:table-cell;