垂直对齐表单、文本等

Question

大家好，我有以下示例 FIDDLE，我的问题是我不明白如何对齐文本和垂直表单，如您所见，我使用了搜索栏高度的一半作为行高，但我不确定它是否正确，对于我使用边距顶部 18px 的形式。有人可以更正代码并向我解释如何以正确的方式进行操作吗？

.HTML：

<div class="search-bar">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</p>
    </div>
    <div class="form-group">
        <form class="horizontal-form" action="#">
            <input type="text" name="sitesearch" class="site-search" value="Enter a word...">
            <input type="button" name="start_search" value="Search">
        </form>
    </div>
</div>

.CSS：

.container {
    width: 960px;
}
.search-bar {
    background-color: #e56038;
    color: #fff;
    min-height: 70px;
    height: auto;
}
.search-bar p {
    padding: 0;
    line-height: 35px;
    font-family: 'Open Sans', sans-serif;
    float: left;
}
.search-bar .form-group {
    float: right;
    margin-top: 16px;
}
.search-bar form input {
    font-family: 'Open Sans', sans-serif;
    padding: 7px;
    outline: 0;
    border:0;
    background: #EBE8DE;
    border-radius:5px;
}
.search-bar form {
    margin: 0;
    padding: 0;
}
.search-bar form input[type=button] {
    width: auto;
    padding: 5px 18px;
    text-shadow: none;
    cursor: pointer;
    box-shadow: none;
    background: #333333;
    color: #fff;
}
.search-bar form input[type=button]:hover {
    background: #EBE8DE;
}

Answer 1

jsfiddle

您可以使用下面显示的代码，但我在您的 JSFiddle 中尝试了这个，但它不起作用。 现在，这可能是因为您需要对样式进行更多的重新评估以使其适合。

但你想做的也不错。它可以工作并确保跨浏览器、响应能力等对其进行测试。

display:inline-block; vertical-align:middle;

Answer 2

使用顶部边距手动调整元素是可以的。我不会使用行高将文本居中放在左侧。如果你真的想垂直居中，你需要桌子行为。您可以使用 display：table 和 display：table-cell 来实现这一点，同时仍然使用div 标签。