Question

大家好，我有以下示例FIDDLE，我的问题是我不明白如何将文本和表格垂直对齐，因为你可以看到我使用了搜索栏的一半高度作为行高，但我不确定它是否正确，对于我使用margin-top 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

使用margin-top手动调整元素很好。我不会使用行高来居中左侧的文本。如果你真的想要垂直居中，你需要表行为。你可以用display：table和display：table-cell来实现这一点，同时仍然使用div标签。

垂直对齐形式，文本等

2 个答案: