CSS居中網頁問題

我有麻煩了使用的CSS定心我的網頁：CSS居中網頁問題

下面

CSS代碼：

#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width: 100px; 
} 

#welcome { 
    position:absolute; 
    top:202px; 
    width:560px; 
    height:224px; 
    z-index:2; 
} 
#newsSection { 
    position:absolute; 
    left:576px; 
    top:209px; 
    width:380px; 
    height:600px; 
    z-index:2; 
}

HTML：

<body> 
<div id="wrapper"> 
<div id="welcome"> 
    //content here 
</div> 
<div id="newsSection"> 
    //content here 
</div> 
</div> 
</body>

我中心的網頁，除了#newsSection div。

爲什麼我在#newsSection div下放置「left：576px」的原因是因爲我希望它將它放在#welcome div的旁邊（並排）然而，當我縮小瀏覽器大小時，#newsSection div將向左移動一點，並重疊＃歡迎div。
如果我刪除「left：57px」，那麼#newsSection div將出現在#welcome div之上...

請幫忙。謝謝

來源

2011-02-13 Victorgalaxy

這可能是因爲你使用絕對位置的子div。因此，「孩子們會狂奔」，因爲他們並不在乎父母div＃wrapper是中心的。

一些潛在代碼：


#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width: 100px; 
} 

#welcome { 
    float: left; 
    width:560px; 
    height:224px; 
} 
#newsSection { 
    float: left; 
    width:380px; 
    height:600px; 
}

來源

2011-02-13 08:38:03 jerluc

好吧，我刪除aboslute位置。現在，一切都在中心，不錯，但是#newsSection div出現在BELOW＃歡迎div。我希望它出現在它旁邊。我該怎麼做？ – Victorgalaxy 2011-02-13 08:45:55

只是增加了一些潛在的代碼（不完全確定你希望如何顯示，但這是我的最佳猜測。 – jerluc 2011-02-13 08:48:09

-1

你應該使用相對定位，即tagname.class {位置：相對;右上：？ ;}

來源

2011-02-13 08:52:26 all

-2

要居中的網頁，你可以使用這個：

.container{ 
 
    width: 100%; 
 
    max-width:80%; 
 
    margin: 0 auto; 
 
}

來源

2017-04-24 08:36:52 user2228874

CSS居中網頁問題

回答

相關問題