html로 양식을 중앙에 배치하고 질문을 정렬하는 방법은 무엇입니까?

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

에서 width:2%을 총알 주위 사업부를 추가하고 text-align:left; margin:0 auto 하고 제거합니다.

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>