如何讓一個div居中對齊在HTML

可能重複：
How to center a div in a div?如何讓一個div居中對齊在HTML

一個簡單的方法，使在HTML爲中心的對象是使用align='center'，但它不工作了DIV。

我想：

style='text-align:center'; 
style='left:50%';

我連真正的中心標籤

<center>

但我不能讓我的目標股利爲中心。

來源

2010-04-22 Mac Taylor

您是否試圖將div本身或div中的文本居中？ – Welbog 2010-04-22 13:28:16

我在我的問題中提到一個div而不是它的文本。謝謝 – 2010-04-22 13:34:11

爲'div'設置寬度，然後使用'margin：0 auto;'：http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA 2014-03-08 19:53:55

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Center</title> 
 
    </head> 
 
    <body> 
 

 
    <div style="text-align: center;"> 
 
     <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div> 
 
    </div> 
 

 
    </body> 
 
</html>

測試，在IE，火狐，Chrome，Safari和Opera的工作。我沒有測試IE6。 IE需要外部文本對齊。其他瀏覽器（和IE9？）將在您給出自動的DIV邊距（左和右）值時起作用。保證金「0 auto」是保證金「0 auto 0 auto」的簡寫（右上角左下角）。

注意：文本也位於內部DIV的中心，如果您希望它保留在左側，只需指定text-align：left;爲內部的DIV。

編輯：在標準模式下運行的IE 6,7,8和9將使用設置爲自動的頁邊距。

來源

2010-04-22 13:28:01 Tower

我需要設置我的div百分比不固定像素，我認爲如果我設置寬度爲95％，它不會是中心 – 2010-04-22 13:35:00

你怎麼知道他的div是在相對位置還是靜態位置？ – meo 2010-04-22 13:36:31

@Mac：這項技術對百分比寬度工作得很好。但是，一般來說，自動保證金的工作必須處於標準模式，對此您需要一個適當的<！DOCTYPE'聲明。父母文本對齊中心的解決方法將適用於怪癖模式，但你絕對不希望今天在怪癖模式下寫任何東西。 – bobince 2010-04-22 13:37:41

-1

怎麼樣東西沿着這些路線

<style type="text/css"> 
    #container { 
    margin: 0 auto; 
    text-align: center; /* for IE */ 
    } 

    #yourdiv { 
    width: 400px; 
    border: 1px solid #000; 
    } 
</style> 

.... 

<div id="container"> 
    <div id="yourdiv"> 
    weee 
    </div> 
</div>

來源

2010-04-22 13:29:31 espais

這不適用於其他瀏覽器或標準模式，因爲自動邊距需要與寬度位於同一個元素上。 – bobince 2010-04-22 13:39:11

它適用於我在怪癖模式以外的其他模式，我不明白恆定的遞減投票 – espais 2010-04-22 14:04:53

我認爲，在align="center"對齊的內容，所以如果你想用這種方法，你就需要使用它的「wraper」 DIV - 一個其餘的只是包裹的div。

text-align正在做類似的事情。

left:50%會被忽略，除非您將div的位置設置爲相對或絕對。

普遍接受的方法是使用以下性質

width:500px; // this can be what ever unit you want, you just have to define it 
margin-left:auto; 
margin-right:auto;

邊緣是自動裝置，它們生長/收縮，以匹配的瀏覽器窗口（或父DIV）

UPDATE

感謝Meo提出這個建議，如果你想要你可以節省時間，並使用短手的餘量。

margin:0 auto;

這個定義頂部和底部爲0（因爲它是零不要緊約缺乏單位）和左，右方的定義爲「自動」然後你就可以，如果你wan't覆蓋說出頂部邊距，就像你使用其他CSS規則一樣。

來源

2010-04-22 13:32:32 thecoshman

您可以使用內聯樣式作爲保證金..保證金：0自動; – meo 2010-04-22 13:35:36

問題是IE無法正確顯示div的中心;我試圖保證金 - 左 - 右：汽車，但沒有在IE上工作 – 2010-04-22 13:51:01

@meo一個公平的觀點。通常最好接受你的建議，因爲它有助於減少文件大小，但我知道的並不多，但每一點都有幫助。雖然對於指導，它有助於解釋「必需」屬性以使其起作用。 – thecoshman 2010-04-22 13:53:28

這取決於如果你的DIV是位置：絕對/固定的或相對/靜態

的位置是：絕對&固定

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

這裏的竅門是有一個負緣的寬度的一半對象

用於位置：相對&靜態

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

這兩種技術都必須設置寬度

來源

2010-04-22 13:34:59 meo

如何讓一個div居中對齊在HTML

回答

相關問題