html - 中心提交按钮与表单框一致

Question

我曾尝试将我的提交按钮与表单的一个条目对齐，但没有成功。我只是希望提交按钮稍微位于表单框的右侧和中心。目前，它位于框的右侧但稍微靠近底部。

我已经尝试了所有不同的响应来回答有关对齐提交按钮( float 、边距等)的类似问题，但我终究找不到正确的选择!

我的 HTML 看起来像这样:

<input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;">
        </input>

    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>

设置按钮样式的 CSS 如下所示:

    #search {
cursor:pointer; 
    width:70px; 
    height: 31px; 
    line-height:0; 
    font-size:0; 
    text-indent:-999px;
    color: transparent;  
    background: url(ico-search.png) no-repeat #151B54 center; 
    border: 1px solid #FFFFFF; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}

#submit:hover {
    background: url(ico-search.png) no-repeat center #151B54; 
    border: 1px solid #FFFFFF;

    }

非常感谢任何帮助!!谢谢。

Answer 1

像这样将每个输入包装在一个 div 中

<div class="vertAlign">
    <input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;"></input>
</div>

<div class="vertAlign"> 
    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>
</div>​

然后应用这个css

.vertAlign{
    display: inline-block;
    vertical-align:middle;
}​

这是一个fiddle结果

注意:您所有的 CSS 都应该保持原样。我在我的 fiddle 中省略了它，以便解决方案更具可读性。