Как центрировать форму, соответствующую заголовку?

У меня есть фиксированная сторона navbar. У меня есть заголовок и тело-контент, где я хочу, чтобы форма была в центре по отношению к заголовку.Как центрировать форму, соответствующую заголовку?

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

источник

2016-12-01 Raviteja

https://jsfiddle.net/y7qht3q4/ – vel

Попробуйте использовать это может помогает и и не стиль в #formset

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

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

источник

2016-12-01 07:22:04

Вы хотите это ..

* { 
 
    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>

источник

2016-12-01 07:24:00

Как центрировать форму, соответствующую заголовку?

ответ

Смежные вопросы