Question

我有一个响应式设计，有4个流体块。我希望将提交按钮固定在底部中心。问题是，按钮向右移动（但不是完全右对齐）

这是我的css：

#product-list{
    width: 100%;
    padding: 0 40px;
    margin: 30px 0 0 0;
    position:relative;
}

article.products{
float: left;
position:relative;
width: 24%;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0;
text-align: center;
border: 1px solid #C0C0C0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 10px;
    background: #fbfbfb;
    background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
    background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%); 
    background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);   
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(.90, #FFFFFF), color-stop(1, #EFEFEF)); 
    background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);  
    background-image: radial-gradient(ellipse farthest-corner at center, #FFFFFF 90%, #EFEFEF 100%);
}



article.products input[type="submit"] {
position: absolute;
bottom: 5px;
left: 50%;
}

这是html（删除了不必要的代码;它是框的动态循环）：

<div id="product-list">
<section class="main">      
    <article class="products">
        <input name="Submit" type="Submit">         
    </article>
    </section>

</div>

Answer 1

您必须将输入放在父div

中

<div class="parent_div">
<input name="Submit" type="Submit">
</div>

并使用此CSS来安排它

.parent_div {
position: absolute;
bottom: 5px;
width: 100%;
}
.parent_div input {
margin: 0 auto;
}

Answer 2

所以，这是你的代码：

article.products input[type="submit"] {
    margin-left: 50%;
    margin-right: 50%;
    marging-bottom: 5px;
}

或者您可以将padding-bottom: 5px放入容器类。你的选择。

如何将按钮与底部中心对齐？

2 个答案: