CODEWITHSUNDEEP
cssbuttonhtmlcenter
125369
125369

Reputation: 3657

Center div consisting of series of button using CSS

this may sound simple, I have made a div block which consists of buttons which should be lying horizontally one after another. The buttons are used for navigation and the number of buttons changes dynamically depending on the web pages.

Now my problem is to align these buttons center at the bottom of every page above the footer note and the alignment should also be in the flow depending upon the increase or decrease of the buttons.

<div class="container">
    <div class="content">
    </div>
    <div class="navButtons">
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a> 
    </div>
</div>

I have tried using margin: 0 auto;

margin-left: auto; margin-right: auto;

But no success, they just stick to the left side of the page.

Here is the CSS for:

.container{    
    background: url('images/gray_bg.jpg');
    width: 900px;
    height: 800px;
    margin: 0 auto;        
    position: relative;
    overflow: auto;      
}

.navButtons{
    margin: 0 auto;
    float: left;         
}

Any good ideas of how this can be solved

Thanks

Upvotes: 1

Views: 1498

Answers (2)

ShrekOverflow
ShrekOverflow

Reputation: 6916

Okay using a bit of HTML with CSS what you want can be pretty easily done here is the link to the jsfiddle

css

div.container {
    width: 100 % ;
    height: 100 % ;
}
div.content {
    position: absolute;
    top: 0em;
    width: 100 % ;
    bottom: 2em;
    overflow - y: auto;
}
div.navButtons {
    width: 100 % ;
}.navButtons {
    position: absolute;
    bottom: 0px;
    left: auto;
}

html

<div class="container">
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 

    </div>
    <div class="navButtons">
        <center>
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a>     
               </center>
        </div>
</div>

jsFiddle

Upvotes: 1

c4urself
c4urself

Reputation: 4287

Seeing as < anchor > tags are inline items you can just do:

div.navButtons {
    text-align: center;
}

see this fiddle to see what i mean: http://jsfiddle.net/c4urself/ZvrZW/

Upvotes: 2

Related Questions