如何将表格分别居中到标题？答案

【问题标题】：How to center the form respective to header?如何将表格分别居中到标题？
【发布时间】：2016-12-01 15:24:00
【问题描述】：

我有一个固定的侧导航栏。在我有一个标题和正文内容，我希望表单相对于标题位于中心。

HTML

<body>
  <div id="sideNav">
  SideNav
  </div>
  <div id="mainContent">
    <div id="header">
      <div>
        <h3>
        Header
        </h3></div>

    </div>
    <div class="body-content">
      <form id="form1">
      <h3>
      Form
      </h3>
        <div id="formset">
          <table>
            <tr>
              <td>
                <label>Login</label>
              </td>
              <td>
                <input type="text" />
              </td>
            </tr>

          </table>
        </div>

      </form>
    </div>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#sideNav {
  width: 150px;
  height: 100%;
  background-color: #6bc7cc;
  position: fixed;
  width: 15%;
}

#mainContent {
  background-color: Aqua;
  height: 100%;
  position: absolute;
  left: 15%;
  right: 0;
}

#header {
  width: 100%;
  height: 50px;
  background-color: #fcb;
}

.body-content {
  margin: 45px;
}

#formset {
  width: 500px;
  margin: 0 auto;
}

Fiddle Here

【问题讨论】：

jsfiddle.net/y7qht3q4

标签： html css css-position margin navbar

【解决方案1】：

尝试使用它可能会帮助你而不是#formset中的样式

#form1{
    display: table;
    margin: 0 auto;
}

#formset{
  width:none;
  margin: 0 auto;
}

【讨论】：

【解决方案2】：

你想要这个吗..

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#sideNav {
  width: 150px;
  height: 100%;
  background-color: #6bc7cc;
  position: fixed;
  width: 15%;
}

#mainContent {
  background-color: Aqua;
  height: 100%;
  position: absolute;
  left: 15%;
  right: 0;
}

#header {
  width: 100%;
  height: 50px;
  background-color: #fcb;
  text-align:center;
}

.body-content {
  margin: 45px;
}

#form1{
    display: table;
    margin: 0 auto;
}

#formset{
  width:none;
  margin: 0 auto;
}

<body>
  <div id="sideNav">
  SideNav
  </div>
  <div id="mainContent">
    <div id="header">
      <div>
        <h3>
        Header
        </h3></div>

    </div>
    <div class="body-content">
      <form id="form1">
      <h3>
      Form
      </h3>
        <div id="formset">
          <table>
            <tr>
              <td>
                <label>Login</label>
              </td>
              <td>
                <input type="text" />
              </td>
            </tr>
            
          </table>
        </div>

      </form>
    </div>
  </div>
</body>

【讨论】：