如何在html中居中表单并保留问题alignes？

Question

我有一个快速的问题，我已经创建

<style type="text/css"> 
     .container { 
     width: 100%; 
     clear: both; 
     text-align:center; 

} 
.container input { 
    width: 2%; 
    clear: both; 

} 
</style> 

要居中，我做规划的形式选择。它的工作原理。圆形气泡，我有中间的中心，但是当我尝试添加名称时，“圆圈复选标记”不再对齐。有没有办法，我可以解决此问题不搞乱与周围的

<Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()>Whatever<BR> 

我附上一个链接到的图像，使之更容易理解的方式。

Answer 1

从input

.form{ 
    text-align:left; 
    margin:0 auto; 
    display:inline-block 
} 
.container input { 
    clear: both; 
} 

DEMO

Answer 2

添加一个div周围的子弹，并使其text-align:left; margin:0 auto 并删除width:2%请找到下面的代码，这将做要紧。

CSS：

.container, .container p { 
    width: 100%; 
    text-align:center; 
} 
.container p { padding:0 0 5px 0; } 
.container input { 
    width: 2%; 
    margin:0 5px 0 0; 
} 

HTML：

<div class="container"> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
    <p><Input type = radio Name = r1 Value = "WhatEver" onClick =GetSelectedItem()><label>Whatever</label></p> 
</div>