Is centering button alignment inside a div dynamically?

Question

I have a div that can have 2 or 4 buttons based on different scripts. I want the buttons inside the div to be centered. How can I do that. I sent my code below.

<div style="margin: 0 auto; width: 656px;"> <input type="submit" style="float:left;" value="Prev"/><input type="reset" value="Reset" style="float:left;"/> <input type="submit" value="Submit" style="float:left;"/><input style="float:left;" type="submit" value="Close"/></div> 

The problem is that it works when four buttons are displayed, but not for scenarios with 3.2 and 1 buttons. How to center alignment without specifying width? Help Plz.

Answer 1

You need to use text-align: center in the container element. Also, avoid using inline styles ...

 <div style="margin: 0 auto; width: 656px; text-align: center;"> 

Demo

Note. Make sure you use text-align: left; if you have text inside the div otherwise they will also be centered.

---

As you commented, it looks like a center to me

---

However, you do not believe that they are perfectly concentrated, I would adjust the width containers and show you that they are centered ....

Using 2 buttons

Note. Make sure you also use CSS Reset ... So you get consistent styles across all browsers, although this should be centered regardless of the reset styles.

Answer 2

If there is only one thing in your div that is, then you must provide the text-align: center property for the div. In this case, everything inside the div will be centered not depending on the width.

 <div style="margin: 0 auto; width: 656px;text-align:center;"> <input type="submit" value="Prev"/><input type="reset" value="Reset"/> <input type="submit" value="Submit"/><input type="submit" value="Close"/> </div> 

Answer 3

Try the following:

 <div style="width:100%"><div style="margin: 0 auto; text-align: center;"> <input type="submit" value="One"/><input type="reset" value="Two"/> <input type="submit" value="Three"/><input type="reset" value="Four"/></div></div> 

http://jsfiddle.net/eK22Y/10/

Answer 4

Can you use the code below and let me know. Only used text alignment center

 <div style="margin: 0 auto; width: 656px; text-align:center"> <input type="submit" value="Prev"/><input type="reset" value="Reset"/> 

Answer 5

you can just specify the text-align: center style ; for div.

Here is the code for the link.

 Style --------------------- .row { text-align:center; } .row input { margin:0px 5px; } HTML ------------------ <div class="row"> <input type="submit" value="Prev"/><input type="reset" value="Reset"/> <input type="submit" value="Submit"/><input type="submit" value="Close"/> </div> 

any element inside a div that has the class 'row' will be centered.