将字段集数据显示到页面中心

Question

我试图让我的字段集数据位于页面的中心，但它显示在我的页面左侧。它显示精细小提琴，http://fiddle.jshell.net/8SuLK/但不显示在浏览器中的页面中心。怎么去。

提前致谢。

Answer 1

从字段集中移除位置并尝试如下： DEMO

CSS：

fieldset {
    border-radius: 10px;
    background: #ffc;
    margin: 20px auto;
    text-align:center;
    display:block;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
   width:70%;
    border: 2px groove threedface;
}

Answer 2

如果您不需要将您的字段集定位为固定，那么您可以通过两种方式将其置于中心位置。

1）设置字段集的宽度并将auto添加到其margin属性。

示例

fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}

DEMO http://fiddle.jshell.net/8SuLK/3/

2）将一个包装器添加到您的fieldset并将其设置为text-align：center;然后设置display：inline-block;到了场地。

示例

<div class="wrapper">
    <fieldset>
        <label>First Name:</label>
        <input type="text" />
        <label>Middle Name:</label>
            <input type="text" />
        <label>Last Name:</label>
            <input type="text" />
        <label>Date of Birth:</label>
            <input type="date" />
    </fieldset>
</div>

.wrapper{text-align:center;}

fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}

DEMO http://fiddle.jshell.net/8SuLK/4/

PS。只需在您的jsfiddle中提醒您，您就可以看到语法高亮显示器以红色显示语法错误。在您的情况下，最后一个结束标记</fieldset>为红色，因为每个输入标记都未关闭。请记住输入的正确语法是<input type="text" />。

另外，为每个输入<input type="text" id="firstname" />添加ID，然后指定标签的内容，例如<label for="firstname">First Name</label>

，这是一种很好的做法。