在CSS中居中放置一個DIV元素

我想在CSS中放置一個Div元素。我嘗試了我發現的一切。似乎沒有任何工作？我用W3C的驗證器檢查了我的CSS。沒有錯誤。我無能爲力。這是我最近的嘗試。在CSS中居中放置一個DIV元素

body { 
    background: url(loginbg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

input[type="text"], input[type="password"] { 
    float: left; 
    width: 230px; 
    padding: 15px 5px 5px 5px; 
    margin-top: 5px; 
    margin-left: 3px; 
    border: 1px solid #999999; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;  
} 


#submit_img, #sumbit_button { 
    cursor: pointer; 
    margin:0 auto; 
} 

#loginarea { 
    margin:0 auto; 
}

我的HTML代碼：

<head> 
<link rel="stylesheet" type"text/css" href="login.css"> 
<title> 
Login 
</title> 
</head> 
<body> 
<div id="loginarea" class="loginarea"> 
<div id="username_box"> 
<input type="text" id="username" value="Username"> 
</div> <div id="password_box"> 
<br><br><br><br> 
<input type="password" id="password" value="Password"> 
</div> 
    <br><br><bR> 
    <button id="sumbit_button" style="border: 0; background: transparent;"> 
     <img src="loginbutton.png" width="150" height: "50" id="sumbit_img"> 
    </button> 
    <br> 
</div> 
<div id="footer" class="footer"> 
    Copyright 2013 company name| CraftManager 1.2 | Credits 
    </div> 
</body> 
</html>

難道頁腳阻塞中心？

目前狀態：

我已經設置在DIV的寬度，以及「中心」邊緣。它有所不同，雖然它不是真正的中心。

來源

2013-05-12 Algo

代碼的東西被搞砸了。抱歉! – Algo 2013-05-12 04:01:24

只需粘貼代碼，選擇所有的代碼，然後按Ctrl + K – Musa 2013-05-12 04:02:09

我假設'＃loginarea'是你想要居中？ – 2013-05-12 04:04:51

我已經做到了這一點，代碼不方便，所以我GOOGLE了它。 http://www.dzone.com/snippets/dead-centre-div可能會有所幫助。

我不知道爲什麼它不會讓你這樣做，通過從左邊的CSS和從頂部的50％做50％。

您是否有興趣將它置於垂直和水平方向？

這就是我所感興趣的，我自己的結果和成功率甚至取決於div的大小。

來源

2013-05-12 04:04:59

啊哈！爲什麼我之前沒有看到過這個答案？反正謝謝！ – Algo 2013-12-21 00:02:45

嘗試設置

margin-left: auto ; 
    margin-right: auto ;

以瞭解詳情here

來源

2013-05-12 04:06:01

我之前試過這個 – Algo 2013-05-12 04:08:54

檢查你是否設置了寬度 – 2013-05-12 04:18:11

缺省情況下<div>元素填滿父元素的寬度的100％。如果你想集中它，那麼你必須做的第一件事是使它小於100％寬。

所以設置的股利，200像素或東西的寬度，然後你可以設置margin-left: auto;和margin-right: auto;當元件中心有一個「已知」

#loginarea { 
    width: 200px; 
    margin: 0 auto; /* top/bottom: 0 margin. left/right: auto margin */ 
}

http://jsfiddle.net/LzgpW/

來源

2013-05-12 04:06:33

不工作:(是的，我的HTML？ – Algo 2013-05-12 04:13:30

@Algo你的HTML是正確的，但你缺少'width：200px;'on'＃loginarea'。 /jsfiddle.net/LzgpW/ – 2013-05-12 04:16:43

它門檻不居中是正確的。 – Algo 2013-05-12 04:23:03

auto利潤率才起作用尺寸。所以，如果你想#loginarea爲中心，你需要給它一個寬度：

#loginarea { 
    width:30em; /* can be any relative or fixed size, like 200px or 30% */ 
    margin: 0 auto; 
}

舉例：的jsfiddle：http://jsfiddle.net/XBCVc/1/

來源

2013-05-12 04:08:03

它改變了一點，但沒有居中。 – Algo 2013-05-12 04:10:05

@Algo它應該是，除非你把它放在寬度小於100％的另一個元素中。 – 2013-05-12 04:11:24

@Algo看到jsFiddle的例子 - 它應該工作。 – 2013-05-12 04:15:03

它看起來像loginarea DIV未關閉。請仔細檢查一下。

來源

2013-05-12 18:06:07

不，它已關閉。不過我會通過w3c來運行它。 – Algo 2013-05-12 20:10:47

W3C說它很好！ – Algo 2013-05-12 20:16:54

您是否爲loginarea添加了寬度？你可以在loginarea的開始標籤中只使用沒有該類的ID。 – 2013-05-12 21:25:32

在CSS中居中放置一個DIV元素

回答

相關問題