如何使用fieldset在div中居中放置一个窗体？

Question

我试图创建一个看起来像这样的线框，我提出

我目前在这里一个形式，虽然

我的代码如下

HTML

<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 form using css重复，因为这解决了整个页面居中。

也不是Center a div that contains a contact form的重复项，因为该表单不包含字段集。这里的字段集似乎出现了一些意想不到的问题。

Answer 1

看起来你的输入太宽。尝试：

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

Answer 2

显然这工作最好，但仍然似乎hacky。

#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

不确定您是否对它进行了整理，但我已将宽度更改为百分比。与固定像素相比，我认为这会更好。我用保证金：0自动居中了整个形式和元素

#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%; 
}