如何在html div中間對齊？

我一直在谷歌尋找這個，它說，CSS代碼是margin: 0 auto;。我試過了，它對我不起作用。請幫忙。提前致謝。如何在html div中間對齊？

login.html

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Log In</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
</head> 
<body> 
<div id="formLogin"> 
    <table class="formTable"> 
     <tr> 
      <td>Username: </td> 
      <td> <input type="text" id="loginusername" name="loginusername"/> </td> 
     </tr> 

     <tr> 
      <td>Password: </td> 
      <td> <input type="password" id="loginpassword" name="loginpassword"/> </td> 
     </tr> 

    </table> 

    <div align="center"> 
     <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/> 
     <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/> 
    </div> 
</div> 

</body> 
</html>

stylesheet.css

table.formTable { 
margin-left: auto; 
margin-right: auto; 
} 

table.formTable td { 
padding: 8px; 
} 

#formLogin { 
width: 360px; 
background-color: #eeeeee; 
margin: 0 auto; 
padding: 20px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius:   10px; 
}

來源

2011-10-13 NinjaBoy

我想你最好剝離下來的代碼示例，以最基本的形式，也包括你想要什麼樣的例子以及你已經嘗試過什麼的一些解釋。 –

對，你想要完成什麼？ – Rob

我希望整個div（「formLogin」）在瀏覽器中間垂直。 – NinjaBoy

如果要居中其垂直也嘗試閱讀this。

更新：

試試這個代碼。當然你可以將CSS移出到你的css文件。經測試，在IE9和FF6：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Log In</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
<style type="text/css"> 
#wrapper{ 
    background-color: #ccf; 
    position: relative; 
    text-align: left; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 

    } 
#content{ 
    background-color: transparent; 
    position: absolute; 
    top: 40%; 
    left: 0px; 
    width: 100%; 
    margin-top: auto; 
    text-align: center; 
    min-width: 900px; 
} 
table.formTable { 
margin-left: auto; 
margin-right: auto; 
} 

table.formTable td { 
padding: 8px; 
} 

#formLogin { 
width: 360px; 
background-color: #eeeeee; 
margin: 0 auto; 
padding: 20px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius:   10px; 
} 

</style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="content"> 
<div id="formLogin"> 
    <table class="formTable"> 
     <tr> 
      <td>Username: </td> 
      <td> <input type="text" id="loginusername" name="loginusername"/> </td> 
     </tr> 

     <tr> 
      <td>Password: </td> 
      <td> <input type="password" id="loginpassword" name="loginpassword"/> </td> 
     </tr> 

    </table> 

    <div align="center"> 
     <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/> 
     <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/> 
    </div> 
</div> 
    </div> 
</div> 

</body> 
</html>

來源

2011-10-13 08:22:33 RandomWhiteTrash

像公共的蜂說嘗試text-align:center;但你也可以添加到您的CSS：

body { 
    width:100%; 
}

這將給你的頁面的寬度，所以你的元素將有一個寬度使用。

更新：

不知道你想讓它垂直居中了。你可以把整個事情放在一個表格單元格中，並使用valign="middle"來居中。

來源

2011-10-13 08:23:08 Rob

我認爲這是關於DOCTYPE。已經嘗試把DOCTYPE

HTML 5

<!DOCTYPE HTML> 
<html>

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

來源

2011-10-13 08:49:47 kst

如何在html div中間對齊？

回答

相關問題