Question

我对网络编程很陌生。

我的head代码中有一个样式标记，如下所示：

<style type="text/css">
  .center {
      float: none;
      margin-left: auto;
      margin-right: auto;
  }

我使用twitter bootstrap。我将form包裹在div块

中

<div class="center"
    <form>
      <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input type="text" placeholder="Type something…">
        <span class="help-block">Example block-level help text here.</span>
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="btn">Submit</button>
      </fieldset>
    </form>
</div>

但是form元素甚至没有移动到中心位置。

我犯了错误？

Answer 1

这是居中的，但由于div是块元素，除非你给出一定宽度（ Example 指定宽度），否则你无法找出差异。

所以试试这个

 .center {
      float: none;
      margin-left: auto;
      margin-right: auto;
    text-align:center
  }
legend{
    text-align:left
}

<强> DEMO

Answer 2

试试这个

.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

Answer 3

将text-align：center添加到容器div ..

  .center {
      float: none;
      margin-left: auto;
      margin-right: auto;
      text-align:center;
  }

小提琴：http://jsfiddle.net/xhjHS/

Answer 4

在表单标记之前使用中心标记。

<center>
 <form></from>
 </center>

表单元素不会移动到中心

4 个答案: