フォームをヘッダに合わせるにはどうすればいいですか？

私は固定側のナビゲーションバーを持っています。私は、ヘッダーとボディー・コンテンツを持っています。ここで、ヘッダーに関してフォームが中央にくるようにします。フォームをヘッダに合わせるにはどうすればいいですか？

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

にuとないスタイルを支援します0

#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

フォームをヘッダに合わせるにはどうすればいいですか？

答えて

関連する問題