div 안에 fieldset을 사용하여 양식을 가운데에 배치하는 방법은 무엇입니까?

Question

나는

나는 현재 여기에 나는 내가 만든이 와이어 프레임과 같은 형태를 만들기 위해 노력하고

하지만

를 다음과 같이 내 코드는 HTML

의 691,363,210

<div id="accountRequest"> 
    <form> 
    <fieldset> 
     <legend>Please sign up here </legend> 
     <label>First Name</label> 
     <input type="text" /> 
     <label>Last Name</label> 
     <input type="text" /> 
     <label>Display Name</label> 
     <input type="text" /> 
     <label>Password</label> 
     <input type="text" /> 
     <label>Tell us about yourself (optional)</label> 
     <textarea rows="3"></textarea> 
     <label>Email</label> 
     <input type="text" /> 
     <div> 
     <button class="btn btn-primary">Create Account</button> 
    </div> 
    </fieldset> 
</form> 

CSS

#accountRequest { 
    background-color:#fff; 
    border-radius:3px; 
    width:330px; 
    border: 1px #333 solid; 
} 
#accountRequest form { 
    width:282px; 
} 
#accountRequest fieldset { border-radius:3px; 
    max-width: 300px; 
} 
#accountRequest form input, 
#accountRequest form textarea { 
    width: 300px; 
} 

아니 중복 즉 전체 페이지에 걸쳐 중심으로 다루고 있기 때문이다.

Center a div that contains a contact form의 복제본에는 해당 형식에 필드 집합이 포함되어 있지 않으므로 마찬가지입니다. 그리고 여기 필드 세트는 예상치 못한 문제를 나타냅니다.

Answer 1

입력 내용이 너무 넓어 보입니다. 시도해보십시오.

#accountRequest form input, 
#accountRequest form textarea { 
    width: 100%; 
} 

Answer 2

분명히 이것은 잘 작동했지만 여전히 해커처럼 보입니다.

#accountRequest { 
    background-color:#fff; 
    border: 1px #333 solid; 
    border-radius:3px; 
    height:540px; 
    width:360px; 
} 
#accountRequest form { 
    margin: auto; 
    position: relative; 
    width: 96%; 
} 
#accountRequest fieldset { border-radius:3px; } 
#accountRequest form label { margin:auto; width:100%; } 
#accountRequest form input, 
#accountRequest form textarea { margin:auto; width: 96%; } 

Answer 3

정렬 한 경우 확실하지 않지만 너비를 백분율로 변경했습니다. 이것들은 내 생각에 고정 픽셀에 비해 좋을 것입니다. 나는 여백 사용 : 전체 형태와 요소

#accountRequest { 
    background-color:#fff; 
    border-radius:3px; 
    width:100%; 
    border: 1px #333 solid; 
} 
#accountRequest form { 
    width: 60%; 
    margin: 0 auto; 
} 
#accountRequest fieldset { 
border-radius:3px; 
width: 100%; 
} 
#accountRequest form input, 
#accountRequest form textarea { 
    width: 100%; 
}