How to align the center

Question

How can I center this shape? I tried, margin-left: auto ;, margin: 50px ;, margin: 0 auto 0 auto; and a few other codes, but nothing works. I want everything to be centered, and if I want to add additional elements, they will also be centered.

Here's jsfiddle: http://jsfiddle.net/ffKKN/1/

Here's the css:

.radio div[type='radio'] { background: transparent; border:0px solid #dcdcdc; border-radius:10px; padding:0px; float:left; margin-left: 10px; cursor:pointer; } .radio div.active { box-shadow:0 0 2px 0px transparent inset; } .tablebuttons img { width: 60px; height: 55px; border: 0px solid #666; background: #fff; display:block; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .question { margin-left: auto; display: none; clear: both; } .question:nth-child(1) { display:block; } #linkDiv { margin: 0; } .clear { clear: both; } 

Answer 1

The problem is that the forms have a block display and extend to the 100% width of their container. You can switch the display to inline-block , and it will spread in shape.

No fixed width required.

 body { text-align: center; } #quiz { overflow: hidden; display: inline-block; } 

jsFiddle Demo

Answer 2

Set the width, then use margin:0px auto;

 #quiz { width: 320px; margin: 0px auto; } 

Also, if you want the text to be inside the container, use

 body { text-align: center; } 

JsFiddle example

Answer 3

In your css add this line:

 #quiz { margin:0 auto; width:350px; } 

Answer 4

If you change the <div class="iphone3gscarrier"> that you use instead of the switches, instead of the <span> and use the following css:

 body { text-align: center; } 

Now they are focused. You can add as many tags as you want, and everything will remain in the center.

http://jsfiddle.net/ZBMgZ/

Answer 5

If you can use the flexbox layout, this is the only way to center elements without resorting to tables, text alignment, or fixed width.

http://jsfiddle.net/tuu4y/

HTML

 <form> <label>Hello <input /> </label> </form> 

CSS

 form { display: inline block; /* flexbox, por favor */ display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; } 

If you need to support older browsers and you can hardcode the width of http://jsfiddle.net/tuu4y/4/

 form { width: 300px; margin: 5px auto; } 

If you cannot set the width hard, you can use any of the three tricks, some do not check, and some avoid. All of them require an inline-block form.

Use text-align: center in container container

If you do not want the text to be centered, you should put text-align:left in the form itself http://jsfiddle.net/tuu4y/2/

 body { text-align: center; } form { display: inline-block; text-align: left; } 

Place the wrapper <form align="center">...</form> ,

Doesn't check though http://jsfiddle.net/tuu4y/1/

 <form align="center"> <label>Hello <input /> </label> </form>