居中div id

我有一個div id，其中包含背景圖片。圖像的寬度是1020px，這正是我想要div box的大小。我想將它置於標題下的頁面上，但我不希望表格或其中的任何文本居中。我認爲我可以爲div和其他元素創建div id/class來區別它們，但我仍然無法獲得div id。我試過了text-align：center屬性，但我沒有任何運氣。居中div id

這是我的CSS：

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background:url(img/background_texture.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

#header { 
    text-align: center; 
    padding: 0px; 
    margin: 0px; 
} 

#header img { 
    vertical-align: bottom; 
} 

#content { 
    background-image:url(img/ContentBox.png); 
    background-repeat: no-repeat; 
    background-position:center; 
    padding: 0; 
    margin: 0; 
    width: 1020px; 
}

這是基本的HTML結構

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Metra Train Schedule</title> 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 
    </head> 

<body> 

<div id="header"><img src="img/Header.jpg" /></div> 

<div id="content"> 

    <table> 
    </table> 

    <table> 
    </table> 

</div> 

</body> 
</html>

這是瀏覽器預覽，你可以看到我在談論更好地在這裏。

enter image description here

來源

2014-01-28 DiscipleDavid

保證金汽車，結合的寬度是畫面的小於100％時，將中心的元素。如果添加margin: 0 auto;到CSS的＃內容，它應該做的伎倆：

#content { 
    ... 
    margin: 0 auto; 
}

此處瞭解詳情：http://learnlayout.com/margin-auto.html

來源

2014-01-28 23:44:36

非常感謝。這就像一個魅力。 :) – DiscipleDavid

您可以使用margin-left: auto和margin-right: auto自動居中圖像如果添加display: block它。

#header img { 
    display: block; 
    margin: 0 auto; /* shorthand for left, right auto and top,bottom 0 
}

Live demo (click).

也許你想包裝所有你的身體的HTML的一個容器中，風格這樣說？

#container { 
    width: 1020px; 
    margin: 0 auto; 
}

Live demo (click).

來源

2014-01-28 23:43:30 m59

這使得一切都變成了左對齊，包括頭。 – DiscipleDavid

這將使圖像居中，他已經使用text-align：center創建了圖像。但是，將頭部CSS切換爲#header {width：1020px;保證金：0汽車; }，以便在對中策略中保持一致。 –

@DiscipleDavid我不明白你的意思......你問它不會影響其他任何東西。 – m59

div {text-align:center;}不起作用FOR DIVS。常見的錯誤。

使用這個代替：

div {width:1020px;margin-left:auto;margin-right:auto}

「自動」強制兩邊的保證金被默認的頁面中的剩餘空間的一半。這不會使div內的任何內容居中。它會爲你完美工作。

來源

2014-01-29 01:18:12 user3246890

回答

相關問題