如何在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>