如何垂直对齐窗体和图像

Question

我正在努力处理将导航栏与我的徽标内联所需的html标记和css。以下是我所拥有的（需要宽屏幕观看）：

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. 通过对表单使用display:inline-block;，实现这种布局的最干净、最语义的方式是什么？我似乎可以把所有东西都向左飘，我不确定什么是最好的方法。

2. 我应该如何在导航栏中垂直居中窗体，line-height是正确的标记吗，或者有更好的方法吗？

Answer 1

没有将元素并排放置的"最佳"方式。这完全取决于情况，但inline-block和float: left都是可行的选择。为了方便起见，我通常使用内联块，直到我真正需要浮动。漂浮物往往需要额外的规则来防止副作用，比如必须清除它们或解决溢出问题。

使用内联块时的垂直居中通常使用vertical-align来完成，尽管这也在很大程度上取决于情况。如果你问我，垂直对齐是CSS中最烦人的事情之一

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

足以使表单与徽标对齐。

Answer 2

只需将img标记设置为垂直居中即可解决问题

img
{
vertical-align:middle;
}

参见演示

请参阅以下链接以更好地理解：float:left；vs显示：内联；vs显示：内联块；vs显示：表格单元格；