CODEWITHSUNDEEP
css
VetteGirl
VetteGirl

Reputation: 21

How do I align a button to the bottom center?

I have a responsive design with 4 fluid blocks. I want the submit button to be fixed at bottom center. The problem is, the button is shifted to the right (but not perfectly right-aligned)

Here is my 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%;
}

Here is the html (deleted unnecessary code; it is a dynamic loop for the boxes):

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

</div>

Upvotes: 1

Views: 4062

Answers (2)

djbhindi
djbhindi

Reputation: 349

So yeah here is your code:

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

Or you could put a padding-bottom: 5px to the container class. Your choice.

Upvotes: 0

Alex
Alex

Reputation: 4774

You have to place the input in a parent div

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

And use this CSS to arrange it

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

Upvotes: 1

Related Questions