如何將html表格放置在中心位置並直接在使用css的徽標下

我有一個表格，我希望它直接位於位於頁面中間的徽標下。到目前爲止，我似乎不能做比這更多。任何幫助將不勝感激。感謝名單。如何將html表格放置在中心位置並直接在使用css的徽標下

Thie是HTML代碼：

<html>  
      <body> 
       <div id="content"> 
        <div id="formwrapper"> 
        <div id="image"> 
         <img src="infiniteflame.jpg" width="200"height="100">  
        </div> 
        <div id="form"> 
        <form> 
         <fieldset class="account-info"> 
         <label> 
          Email Address 
          <input type="text" name="username"> 
         </label> 
         <label> 
          Password 
          <input type="password" name="password"> 
         </label> 
         </fieldset> 
         <fieldset class="account-action"> 
          <input class="btn" type="submit" name="submit" value="Login"> 
          -----OR---- 
          <input class="btn" type="submit" name="submit" value="Login via facebook"> 
         <div id="lang_pref"> 
          <ul> 
          <li><a href="/?locale=en">English</a></li> 


             <li><a href="/?locale=ar">العربية</a></li> 


             <li><a href="/?locale=cs">čeština</a></li> 


             <li><a href="/?locale=da">dansk</a></li> 


             <li><a href="/?locale=de">Deutsch</a></li> 


             <li><a href="/?locale=el">Ελληνικά</a></li> 


             <li><a href="/?locale=es">español</a></li> 


             <li><a href="/?locale=es_419">español&nbsp;latinoamericano</a></li> 
          </ul> 
         </div> 
         </fieldset> 
       </form> 

        </div> 
        </div> 

        <footer> 
         <div class="copyright"><img src="infiniteflame.jpg" width="15" height="20" align="middle"><br/>Copyright© 2016 PopeeSoft Solutions, Inc.</div> 
        </footer> 


       </div> 
       </body> 
    </html>

這是CSS代碼：

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
#content { 
    width: auto; 
    margin: auto; 
    border:1px solid #00C; 
} 
#formwrapper{ 
width: 1200px; 
    margin: auto; 
    height: 900px; 
    border:1px solid #00C; 
    } 

#image { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -208px; 
    margin-left: -155px; 
} 

footer { 

    background: #eee; 

} 
form { 
    border: 1px solid #c6c7cc; 
    border-radius: 5px; 
    font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    overflow: hidden; 
    width: 350px; 
} 
fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
input { 
    border-radius: 5px; 
    font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin: 0; 
    width:349px; 
} 
.account-info { 
    padding: 20px 20px 0 20px; 
} 
.account-info label { 
    color: #395870; 
    display: block; 
    font-weight: bold; 
    margin-bottom: 20px; 
} 
.account-info input { 
    background: #fff; 
    border: 1px solid #c6c7cc; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 
    color: #636466; 
    padding: 6px; 
    margin-top: 6px; 
    width: 100%; 
} 
.account-action { 
    background: #f0f0f2; 
    border-top: 1px solid #c6c7cc; 
    padding: 20px; 
} 
.account-action .btn { 
    background: linear-gradient(#49708f, #293f50); 
    border: 0; 
    color: #fff; 
    cursor: pointer; 
    font-weight: bold; 
    float: left; 
    padding: 8px 16px; 
} 
.account-action label { 
    color: #7c7c80; 
    font-size: 12px; 
    float: left; 
    margin: 10px 0 0 20px; 
} 
ul li{ 
    list-style-type:none; 
    display: inline; 
    }

來源

2016-08-13 Henry Nnonyelu

https://jsfiddle.net/popeesoft/tj3vsb6p/ –

如果代碼格式不正確，請耐心等待。我真的試過。位置設置爲相對的 –

的#image ID修改了一下解決問題

<body> 
    <div id="content"> 
    <div id="formwrapper"> 
     <div id="image" align="center"> 
     <img src="infiniteflame.jpg" width="200" height="100"> 
     </div> 
     <div id="form" align="center"> 
     <form> 
      <fieldset class="account-info"> 
      <label> 
       Email Address 
       <input type="text" name="username"> 
      </label> 
      <label> 
       Password 
       <input type="password" name="password"> 
      </label> 
      </fieldset> 
      <fieldset class="account-action"> 
      <input class="btn" type="submit" name="submit" value="Login"> -----OR---- 
      <input class="btn" type="submit" name="submit" value="Login via facebook"> 
      <div id="lang_pref"> 
       <ul> 
       <li><a href="/?locale=en">English</a></li> 


       <li><a href="/?locale=ar">العربية</a></li> 


       <li><a href="/?locale=cs">čeština</a></li> 


       <li><a href="/?locale=da">dansk</a></li> 


       <li><a href="/?locale=de">Deutsch</a></li> 


       <li><a href="/?locale=el">Ελληνικά</a></li> 


       <li><a href="/?locale=es">español</a></li> 


       <li><a href="/?locale=es_419">español&nbsp;latinoamericano</a></li> 
       </ul> 
      </div> 
      </fieldset> 
     </form> 

     </div> 
    </div> 

    <footer> 
     <div class="copyright"><img src="infiniteflame.jpg" width="15" height="20" align="middle"> 
     <br/>Copyright© 2016 PopeeSoft Solutions, Inc.</div> 
    </footer> 


    </div> 
</body>

這是CSS：

@charset "utf-8"; 

/* CSS Document */ 

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

#content { 
    width: 100%; 
    margin: auto; 
    border: 1px solid #00C; 
} 

#formwrapper { 
    width: 100%; 
    margin: auto; 
    height: 900px; 
    border: 1px solid #00C; 
} 

footer { 
    background: #eee; 
} 
form { 
    border: 1px solid #c6c7cc; 
    border-radius: 5px; 
    font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    overflow: hidden; 
    width: 350px; 
} 

fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

input { 
    border-radius: 5px; 
    font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin: 0; 
    width: 349px; 
} 

.account-info { 
    padding: 20px 20px 0 20px; 
} 

.account-info label { 
    color: #395870; 
    display: block; 
    font-weight: bold; 
    margin-bottom: 20px; 
} 

.account-info input { 
    background: #fff; 
    border: 1px solid #c6c7cc; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 
    color: #636466; 
    padding: 6px; 
    margin-top: 6px; 
    width: 100%; 
} 

.account-action { 
    background: #f0f0f2; 
    border-top: 1px solid #c6c7cc; 
    padding: 20px; 
} 

.account-action .btn { 
    background: linear-gradient(#49708f, #293f50); 
    border: 0; 
    color: #fff; 
    cursor: pointer; 
    font-weight: bold; 
    float: left; 
    padding: 8px 16px; 
} 

.account-action label { 
    color: #7c7c80; 
    font-size: 12px; 
    float: left; 
    margin: 10px 0 0 20px; 
} 

ul li { 
    list-style-type: none; 
    display: inline; 
}

來源

2016-08-13 05:20:38 Smit

。它將圖像設置在表單頂部。這是我想要的東西。我想要的第二件事是讓它們全部位於頁面的中心。 –

如何將html表格放置在中心位置並直接在使用css的徽標下

回答

相關問題