表单居中，坑爹啊

2014年3月17日 10:18:06

表单居中的问题，困扰了很多次。具体的问题是： 左侧label是浮动的，直接居中的，就跑到input上面了。为了保持水平，同时表单还要居中。将FIELDSET标签放入一个div  div的内边距设置了200px。模拟出了居中的效果

 

代码如下：

 

<FIELDSET >
<DIV id=legend ><LEGEND>供应商档案</LEGEND></DIV>

<DIV class='mydiv'>

<DIV class='control-group'><!-- Text input--><LABEL class=control-label
    for=input01>名称</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Name"
    placeholder="公司名称">
<P class=help-block>不要超过50汉字</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Select Basic --><LABEL class="control-label">类型</LABEL>
<DIV class=controls><SELECT class=input-xlarge name="s_Type">
    <OPTION selected>元器件</OPTION>
    <OPTION>元器件</OPTION>
    <OPTION>元器件</OPTION>
    <OPTION>零件</OPTION>
    <OPTION>零件</OPTION>
</SELECT></DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>编码</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Id"
    placeholder="注意不可以重复"><button class="btn btn-mini" type="button">Go!</button>
<P class=help-block>只能为字母和数字</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>地址</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Address"
    placeholder="详细地址">
<P class=help-block>不要超过50汉字</P>
</DIV>
</DIV>

<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>联系人</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Person"
    placeholder="格式:吴文付或吴先生">
<P class=help-block>建议为供应商负责人</P>
</DIV>
</DIV>


<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>联系方式</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Phone"
    placeholder="联系人手机或公司电话">
<P class=help-block>必填，建议为联系人的手机</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>备注</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Remark"
    placeholder="额外信息">
<P class=help-block>简单描叙，限50汉字</P>
</DIV>
</DIV>


<DIV class=control-group><LABEL class=control-label></LABEL> <!-- Button -->
<DIV class=controls>
<BUTTON class="btn btn-success" type=submit>提交</BUTTON>
<BUTTON class="btn btn-success" type=reset>重置</BUTTON>
</DIV>




</FIELDSET>
</DIV>

</DIV>
</FORM>

居中表单