中心提交按钮与表单框一致答案

【问题标题】：Centre submit button in line with form box中心提交按钮与表单框一致
【发布时间】：2012-09-03 18:07:35
【问题描述】：

我试图将我的提交按钮与表单的一个条目对齐，但徒劳无功。我只是希望提交按钮稍微位于表单框的右侧和中心。目前，它在右边，但在盒子的底部一点点。

我已经尝试了所有不同的回答来回答有关对齐提交按钮（浮动、边距等）的类似问题，但对于我来说，我找不到正确的选择！

我的 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;

    }

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

【问题讨论】：

点击帮助你接受的答案旁边的勾

标签： html css button alignment

【解决方案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 都应该没问题。我在小提琴中省略了它，以便解决方案更具可读性。

【讨论】：

【解决方案2】：

试试这个 jsfiddle：

http://jsfiddle.net/UXRjN/1/

我将搜索按钮包裹在 DIV 周围并添加了一些次要属性

【讨论】：

谢谢。刚试了一下。该按钮现在位于框的中心，但一直位于右侧。我猜是因为浮动？我希望它就在盒子旁边。仅供参考，我意识到悬停 id 应该是#search:hover not submit，我之前的名称更改错误。

【解决方案3】：

使用vertical-align CSS 属性垂直对齐行内的内联元素。

【讨论】：