html - 将自定义搜索按钮完美对齐到我的搜索输入字段的左侧

Question

谁能告诉我如何垂直对齐搜索按钮？

网站:http://www.search.no/ysearch4.html

<center><form id="searchform" onsubmit="return search();" name="searchform">
<div>
<input type="text" size="40" id="searchbox" style="height:30px;">
<input type="image" border="0" src="images/mal/searchbut.gif" width="87" height="26"</input>
</div></form></center>

谢谢!

Answer 1

您的 HTML 中有一些错误，我已在下面更正了这些错误，并删除了 the deprecated center element 的使用。并替换为 text-align:center on the form and using display:inline-block;在子 div 上使内容居中。

然后，要垂直对齐输入，只需添加 vertical-align:middle根据下面的 CSS。

Demo Fiddle

( demo with no gaps )

HTML

<form id="searchform" onsubmit="return search();" name="searchform">
    <div>
        <input type="text" size="40" id="searchbox" style="height:30px;" />
        <input type="image" border="0" src="images/mal/searchbut.gif" width="87" height="26" />
    </div>
</form>

CSS

form {
    text-align:center;
}
form div {
    margin:0 auto;
}
input {
    margin:0;
    vertical-align:middle;
}