Question

我徒劳地尝试将提交按钮与表单的一个条目对齐。我只是希望将提交按钮略微放置在表单框的右侧和中间。目前，它是在右侧，但在盒子的底部稍微。

我已经尝试了所有不同的回答来回答有关对齐提交按钮（浮动，边距等）的类似查询，但对于我的生活，我找不到合适的选项！

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

Answer 2

试试这个jsfiddle：

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

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

Answer 3

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

中心提交按钮符合表格框

3 个答案: