CODEWITHSUNDEEP
htmlcss
Sandy
Sandy

Reputation: 14125

Align buttons in container

I am not good at front end(html, css etc..) I want to align some buttons in a container as shown below. The cntainer will have some heading and some buttons. Please hep me out.

Thanks in advance.

enter image description here

Upvotes: 0

Views: 9314

Answers (4)

Shailender Arora
Shailender Arora

Reputation: 7778

you can achieve your results through this :-

HTML

 <fieldset>
<legend>Container Heading</legend>
<button id="visit_return_button" type="submit">Button1</button>
<button id="visit_return_button" type="submit">Button2</button>
 </fieldset>

CSS

    fieldset {
    border:1px solid;
    width:200px;
    height:70px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

legend {

    margin-left:5px;
}

#visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
}

or see the demo:- http://jsfiddle.net/VY8xs/21/

Upvotes: 1

skip405
skip405

Reputation: 6279

If you have two button elements and you want them aligned center - add a text-align: center to their parent. The working example is here: http://jsfiddle.net/skip405/uvAcj/

If you want to specify the distance between the buttons - simply adjust the margin-left property to your needs. The button:first-child selector will NOT move the first button to the left and they will be perfectly aligned center.

Upvotes: 1

Ryan Fiorini
Ryan Fiorini

Reputation: 800

jsfiddle example

<style>
    div#container {
    overflow:hidden;
    border:1px solid #000;
    width:200px;
    position:relative;
    padding:5px;
}

div#container > button {
    float:left;
    /*or float:right; */
}

​
</style>

<div>containing heading</div>
<div id="container">
<button>submit</button>
<button>cancel</button>
</div>​

Upvotes: 0

GuZzie
GuZzie

Reputation: 974

I like to do this with the css float option. But there are several ways to do this. You should create a div for each button and use css to align them properly.

For example:

CSS

#button1{
float: left;
margin-top: 10px;
}

#button2{
float:left;
margin-top: 10px;
margin-left: 10px;
}

HTML

<div id="container">
    <div id="button1">
         Your button HTML here
    </div>

    <div id="button2">
         Your button HTML here
    </div>
</div>

Upvotes: 0

Related Questions